1. About
2. Docs
3. Examples
4. Download
5. Contact

FlyTabs version 1.0

FlyTabs is a jQuery plugin that allows tabs to be created in on-the-fly programatically. As of this writing all tabbing plugins require for the user to hardcode the HTML associated with the tabs onto the HTML page where it is used. Enters FlyTabs.

Why the name?

Primarily the name comes from the purpose of this plugin. One can create tabs on-the-fly. That, and the slang definition of "fly". Soon you will see how fly this plugin really is. This is also how I came up with my mean little fly mascot - notice how the wings are like two tabs.

Usage

It is fairly easy to learn FlyTabs. So much that one can pick it up merely by looking at the examples. In it's simplest form, it would be something like this:

  <script>
  $(document).ready(function() {

    $('#flytabs1').flyTabs.addTab();

  });
  </script>
  <ul id="flytabs1"></ul>

How much simpler could it get? FlyTabs has its own namespace as to not override any other plugins' methods that may bear the same name. It is therefore important to notice that one will always call FlyTabs methods using this syntax

    $(selector).flyTabs.method(options);

This is for your own good, so FlyTabs can co-exist with any other plugin you might want to use this plugin. In case you wonder how complex the configuration could get, the following will hopefully do the trick for you:

  $(document).ready(function() {

    $('#flytabs2').flyTabs.config({
                                   align: 'left',
                                   html: 'This would be a welcome screen',
                                   effect: 'no'
                                  }); 

    $('#flytabs2').flyTabs.addTab({ 
                                   icon: 'images.jpeg',
                                   caption: 'Second Tab',
                                   status: 'pinned',
                                   html: '<ul id="flytabs3"></ul>',
                                   code: function() { 
                                                     $('#flytabs3').flyTabs.config({align: 'left'});
                                                     $('#flytabs3').flyTabs.addTab({
                                                        caption: 'Kill the fly',
                                                        html: 'Splatch'
                                                      });
                                                     $('#flytabs3').flyTabs.addTab({
                                                        caption: 'Onion Soup',
                                                        html: 'Yum!',
                                                        icon: 'images.jpeg', 
                                                        code: function () { alert('Hi!') }
                                                      });
                                                    }
                                 });


  });

As is obvious, even a complex example is quite simple to follow. Notice how we can use the code and html directives together to dynamically add more tabs on-the-fly!

Design

FlyTabs attempts to make it easy to use, and therefore stresses that everything be optional - or at best as much as possible. This section will walk you through explaining the moving parts of FlyTabs.

1. Hook
   This is the only HTML tag that needs to be inserted, or hardcoded, into the HTML document*. This will tell FlyTabs where you would like to insert the tabs on-the-fly.
2. Config
   This configures the tabs. Tabs is the overall collection or grouping of all the individual tabs that belong to one common group. Notice how this is defined as the plural form: Tabs.
3. Methods
   Finally there are the actual methods that will execute a particular action. A Tab is an individual tab. Notice how this is defined as the singular form: Tab. Methods generally deal with one tab at a time, though there are exceptions.

* Even this is not entirely true, since one could effectively create even that on-the-fly.

Hooks

A hook is just a <ul> tag that indicates the location where you would like the tabs to be inserted. A hook would simply look like this:

  <ul id="flytabs1"></ul>

Yes, it would just be an empty tag. Nothing more. Just that. That's right. The only condition is that it has an id of some sort. Be kind and give it a logical name. The name will be used internally, and this will be your jQuery selector! This means that to work with these particular tabs, you would call it jQuery-style as such:

  $("#flytabs1").flytabs.method()

Hooks can have any CSS formatting you desire, any spacing, any attributes, the only attribute FlyTabs cares about is the id.

Directives

This is the section that explains the various directives or options to the various moving parts of FlyTabs.

Config

    $('#flytabs2').flyTabs.config({
                                   align: 'left',
                                   effect: 'no',
                                   html: 'This can be HTML. <blink>SERIOUSLY!</blink>'
                                  }); 

• align (default value: top)
  Specifies where a tab is to be added.
  • Top would indicate that it will be added at the top
  • Left specified the tab will be added on the left
• effect (default value: yes)
  Specifies if there will be a fade in and fade out every time a tab is selected.
  • Yes indicates the effect will be applied
  • No indicates the tab will immediately display the content
• html (default value: )
  Allow to set a welcome screen which is content in the content area for a tab, without a tab selected. A welcome screen is only visible as long as no tab has been selected.
  • It takes any HTML content, which includes further scripting.

Methods

addTab

Add a tab dynamically to the tabs group as per the jQuery selector.

    $(selector).flyTabs.addTab({
                                caption: 'My New Tab',
                                code: function(){ alert('hi') },
                                html: 'This can be any content including HTML',
                                icon: 'http://www.adamovsky.com/flytabs/icon.gif',
                                id: 'tabId',
                                index: 4,
                                status: 'off',
                                url: 'http://www.adamovsky.com/flytabs/'
                               });   

All options are optional!

caption (default value: tabName[n] - e.g. tabName4)
• This can be any text you'd like to appear on the tab itself

code (default value: )
• Defines code to be execute once a tab is done loading. Should be defined as a function() {...} block.

html (default value: Tab[n] - e.g. Tab4)
• The content of the actual tab to be displayed when respective tab is selected. This can be any type of content, including HTML, JavaScript, and the like.
• The url directive overwrites this directive if present.

icon (default value: null)
• URL to an icon that is to be placed in the tab itself next to the tab caption.
• If not present, tab will be a text-only tab.
• If present, text will middle align.

id (default value: [selector]-tabID[n] - e.g. #flytabs1-tabID4)
• An id by which the tab can be referred to for CSS or via scripting

index (default value: [n] - e.g. 4)
• Defines where to insert the new tab
• If no index is specified, it automatically increments it and adds the tab to the end

status (default value: off)
• Defines what initial state the tab should be in when added
• off indicates the tab should take on the tabOff class
• on indicates the tab should take on the tabOn class
• pinned indicates the tab should take on the tabPinned class
• A pinned tab is a tab that has been selected (e.g. clicked) and whose content is displayed

url (default value: #)
• Defines an URL where to pull content in from when a tab is selected
• This is pulled in via jQuery's AJAX call, so all restrictions apply that apply to jQuery
• If undefined, the tab will display whatever is specified in the html directive.

clearTabs

Resets all tabs to an off status. This will in effect flush any states the tabs may have.

  $(selector).flyTabs.clearTabs();  

No arguments or options.

countTabs

Counts all the tabs that are in a tabs group as defined by the jQuery selector. Returns the number of items.

  $(selector).flyTabs.countTabs(); 

No arguments or options.

getTab

Pulls up the actual tab content of the specified tab.

  $(selector).flyTabs.getTab(3); 

[n] (default value: )
• Integer instructs what tab index to display content of
• It does not actually select the tab, for that use the pinTab method

pinTab

Pins the tab to appear as though it was clicked.

  $(selector).flyTabs.pinTab({
                              index: 3
                             }); 

index (default value: last tab index)
• Integer instructs what tab to pin

removeTab

Removes a certain tab from the tabs.

  $(selector).flyTabs.removeTab({
                                 index: 3
                                }); 

index (default value: last tab index)
• Integer instructs what tab to remove

That's It!

If you like it, let me know that you use it so I can add a link to you. I'm always appreciative of questions, comments, and ideas for future releases.

Milan Adamovsky created this.