FlyTabs : Tabs on-the-fly
What is it?
FlyTabs creates cross-browser compatible tabs programmatically following closely the latest tabs development trends (lists) with no hard-coded HTML content other than a marker indicating where the tabs are to be inserted. Tabs can be added and removed on-the-fly via a simple API, integrate individual tabs with AJAX, customize the look and feel via CSS, have either top or left tabs with the flip of a switch, complete namespace isolation, multiple concurrent tabs on same page, and for those who want to write their own jQuery plugins, some good code to feast your eyes on.
What browsers does it work with?
It has been successfully tested on IE6, IE7, FireFox 2, and FireFox 3.
Why on-the-fly?
All tabs plugins available for jQuery up to this point required the user to hard-code all tabs and corresponding content onto the HTML page. This means that in order to dynamically manipulate the tabs, messy programming is most often required - not to mention a lack of intuitive usage.
FlyTabs has a simple API that lets you add, remove, count, select, and pin tabs programmatically from within your JavaScript code. You can literally begin with a nearly empty HTML document and build a nice tabbed interface in just minutes.
How do I use FlyTabs?
The first thing you need to do is set a marker on your HTML page that instructed FlyTabs where to build the tabs. Since we rely on lists to create our tabs, that will be the only tag we will need.
<ul id="flytabs1"></ul>Believe it or not the above is the only HTML that will need to be hard-coded onto your webpage.
Next, simply begin manipulating the tabs. The API is quite simple, and provide for namespace isolation. This is beneficial in case there are other plugins who are using the same method names. All methods for FlyTabs are accessed via its own namespace as such:
jQuery.flyTabs.method()Pretty neat. That's all you need to know as to how to use it.
What are the possible methods?
- config()
- addTab()
- clearTabs()
- countTabs()
- getTab()
- pinTab()
- removeTab()
A complete example
This demonstrates what a left two-tabbed HTML will look like, where one tab has an icon, that will grab a page via AJAX, and when it is done it will execute a piece of code.
$('#flytabs3').flyTabs.config({align: 'left'});
$('#flytabs3').flyTabs.addTab();
$('#flytabs3').flyTabs.addTab({
name: 'Onion Soup',
status: 'off',
url: 'test.html',
icon: 'images.jpeg',
code: function () { alert('Howdy') }
});
<ul id="flytabs3"> </ul>That's it. A neat feature is that all options are optional.
Releases
| Official releases | Date | Size | Links | Status | |
|---|---|---|---|---|---|
| 1.0.1 | 2009-Apr-12 | 25.7 KB | Recommended for 1.2.x |  | |