jquery web accordion

16
General Overview of Likno Web Accordion Builder Likno Web Accordion Builder is a powerful WYSIWYG application that gives you the ability to create stunning jQuery accordions without writing any code.

Upload: likno-software

Post on 27-Jan-2015

126 views

Category:

Technology


0 download

DESCRIPTION

Likno Web Accordion Builder is a powerful WYSIWYG application for creating web accordions. You can create any type of accordion (horizontal accordion, vertical accordion, image accordion etc.). All the accordions produced are going to work perfectly in all browsers, CMS and devices.

TRANSCRIPT

Page 1: jQuery web Accordion

General Overview ofLikno Web Accordion Builder

Likno Web Accordion Builder is a powerful WYSIWYG application that gives you the

ability to create stunning jQuery accordions without writing any code.

Page 2: jQuery web Accordion

This is the Welcome Screen that appears when you open Likno Web Accordion Builder.

You can choose the example you want to start with and then click on “Create new project from Example”.

Page 3: jQuery web Accordion

This is the Project Panes tab in which you can control the population, the content and the positioning of your accordion.

Page 4: jQuery web Accordion

You have 3 options to populate an accordion:

- Populate the accordion panes inside the project: this means that all the content is going to be in the compiled JavaScript file.

- Populate the accordion panes inside your page, through a UL/LI structure: this means that you need to place the content in your page in a UL/LI structure.

- Populate the accordion panes inside your page, through DIV elements: this means you need to insert your accordion content in your page in a DIV structure.

Page 5: jQuery web Accordion

As for the content of your accordion body, you have various ways to specify it:

- Content can be HTML embedded to your project- Content can be an image- Content can be retrieved from another file through AJAX - Content can be an external page or file (HTML, PHP, PDF, DOC, etc.)

Page 6: jQuery web Accordion

You can position the accordion as “Embedded” in the page.

Just place a positioning element (with the specified ID) somewhere in the page and the accordion will appear there.

Page 7: jQuery web Accordion

You can also position the accordion as “Floating” over page.

If you go with this selection, you can position the accordion Relative to Window, Relative to an existing Element in the page or Relative to an existing Image in the page.

Page 8: jQuery web Accordion

In Style Editor Tab, you are able to set the Accordion Type, the Show/Hide options and the Appearance styling properties.

Page 9: jQuery web Accordion

In the Accordion Type properties you can set the Accordion Behavior (i.e. if the panes are independent or co-dependent), if an accordion pane should be initially open, if the last open panes should be remembered, if the Pane Orientation should be Vertical or Horizontal, etc.

Page 10: jQuery web Accordion

In Show/Hide properties, you can set how (effects) and when (events) you want the accordion to show/hide.

You can also set the accordion to play as a slideshow using play/pause buttons.

Page 11: jQuery web Accordion

In Appearance you can set the CSS properties for the Accordion Container, the pane Headers and the pane Bodies.

Page 12: jQuery web Accordion

In Sample Code Tab, you can see the code you need to add to your page for the accordion to be displayed.

Page 13: jQuery web Accordion

In Preview Tab, you can see the preview of the accordion you have created.

Page 14: jQuery web Accordion

In Project Properties Tab, you can set the properties for you project. You can select the Site Root Folder, the name of the compiled JavaScript file and the subfolders for the compiled files and images.

Page 15: jQuery web Accordion

Likno Web Accordion Builder has plugins for Joomla, WordPress and Drupal to help you integrate your accordion to your favorite CMS.

Page 16: jQuery web Accordion

Visit www.likno.com for more information