Tabifier
This is an example of how you can easily use the JavaScript tabifier to create a tabbed interface with FlexibleList. This nice javascript is dead simple to use and after you have downloaded this example you can create tabs just by adding items on your page.
PS: If you like this example and you use it for yourself or a client I suggest that you send a small donation to the creator of the tabifier JavaScript. DS.
About
This interface has been created with FlexibleList together with tabifier, very nice and easy to use javascript.
The example shows the "simplest" way that you can use this script. The script has lots of feature that I have not used in this example, such as the possibility to use multiple tab sets on the same page, specify which tab that is displayed at first, loading tabs dynamically using Ajax etc. A full list of features can be found on the tabifier website.
Style
The .flstyle found in the example has been prepared to work with the tabifier javascript and is complete with the example CSS that comes together with the script. If you want to modify the looks of the tabs you can just modify the CSS in the setup window in FlexibleList.
Javascript
To create the actual tabbed interface you need to add the tabifier javascript included in the example to the javascript field in the page inspector for your FlexibleList page. This is the stock tabber-minimized.js script which has been stripped from all comments etc. in order to make it smaller and quicker to load.
Content
After setting up your FlexibleList page all you have to do is to put some content on your page.
- The name of the tab is what you put in the "Name" field of the item.
- The content is put in the "Content" field of the item and can contain whatever you want.
Finished
Thats it! There is nothing more to do here :)
Download
The example can be downloaded from the example page.