JQuery Plugin: imAnimTabber

I decided to redesign my company site (intriguingminds.com). I hadn’t touched it in about 3-4 years, so it was long overdue. With its simplistic design, I decided to use the imUpSideDownTabber JQuery plugin that I had created a few months ago. I soon learned that, due to my design, the plugin was not robust enough for the functionality that was necessary, so I decided to create an upgrade. The new functionality was significant enough (it does more than just up-side-down-tabbing) that I decided to rename the plugin altogether (imAnimTabber). I never did like the name ‘imUpSideDownTabber’. The imAnimTabber plugin can be used to display content with the following animated options:

slide (imUpsideDownTabber)
height
width
fade
carousel

As with the imUpSideDownTabber, the tabs can be created dynamically (‘auto’ mode), but I added a ‘manual’ mode so that the plugin can function when the tabbing interface is already created (the ‘carousel’ option can only be used in ‘manual’ mode). One of the major changes in this JQuery plugin is that the tabs can be individually styled. I needed this functionality for my IntriguingMinds.com (link) site. Unlike the imUpSideDownTabber, I created a demo page so that you can see how to set it up.

First, download the plugin (the plugin can be downloaded from Google Code or JQuery Plugins).

Using the imAnimTabber

$(document).ready(function(){
      $("#body").imAnimTabber({
            mode:'manual',
            tabs: [{"content_id": "about", "class_name": "about", "active_tab_class": "about_sel"},
             {"content_id": "design", "class_name": "design", "active_tab_class": "design_sel"},
             {"content_id": "socialize", "class_name": "socialize", "active_tab_class": "socialize_sel"},
             {"content_id": "marketing", "class_name": "marketing", "active_tab_class": "marketing_sel"},
             {"content_id": "commerce", "class_name": "commerce", "active_tab_class": "commerce_sel"} ]
       });
});

Options (Note: in the example above, “#body” is the parent container for the entire interface).

1. mode: The options for mode are ‘manual’ or ‘auto’. The default is ‘auto’. Use ‘auto’ mode if you want the imAnimTabber plugin to create the tabs for you.  Remember if you plan to use the ‘carousel’ option, the plugin must be set for manual mode.
2. tab_container: As the name suggests, this container holds the tabs. This option mandatory in ‘auto’ mode or when using the ‘carousel’ option. It is not needed if the tabs are individually styled (more on this later).  Make sure that you have styles this container as well as the ‘a’ tag within the container.
^?View Code CSS

#tab_cntnr { width:600px; float:left; background-color:#727272; }   #tab_cntnr a { display:block; text-decoration:none; float:right; width:75px; height:26px; color:#fff; background: url(images/menu_tab.jpg) no-repeat; text-align:center; font: bold 10px Helvetica, Arial, sans-serif; margin-right:5px; padding-top:3px; }

3. active_tab_class: The option is the class of a selected tab. Use this option if all of the tabs will use the same class when selected. This option can’t be used with the ‘carousel’ option. If I set the active_tab_class to ‘selected’, I can style the ‘a’ tag accordingly:
^?View Code CSS

#tab_cntnr a.selected { color:#2d2d2d; background: url(images/menu_tab_over.jpg) no-repeat; }

4. attribute: Use this option to specify how you want the content to appear when the relevant tab is clicked. The options are slide, height, width, or fade. The default attribute is slide. The slide attribute should be used if you want to use the up-side-down tabbing functionality. Note: the ‘carousel’ option is set differently (more on this later). Also, if the width or fade options are used, make sure to set which content is to be initially displayed by setting “selected”: true.
^?View Code JAVASCRIPT

{"content_id": "about", "class_name": "about", "active_tab_class": "about_sel", "selected": true}

5. speed: Use this option to control the speed of the animation. ‘slow’ is the default, but you can use any value that is accepted by JQuery’s animation object (slow, normal, fast, 2500, etc).
6. queue: Use this option to control the order in which the animation occurs. The options are true (the default) or false. When set to true, the next selected content will not display until the previous content has finished animating. When set to false, the ‘on’ and ‘off’ animation will occur at the same time. This option is not needed when using the ‘carousel’ option.
7. tabs: This option is the most significant change from the imUpSideDownTabber plugin in that it as more options. Use this option to link the tabs with the content. This option is not used with the ‘carousel’ option. Options:
   • caption: Used only in ‘auto’ mode. It is the text that is displayed on the tab.
   • content_id: The id of the content div that will be displayed when the tab is clicked.
   • class_name: Use this option to style the tabs individually. When using this option, the ‘tab_container’ option is not needed. On my intriguingminds.com site, I created 5 buttons using different colors, so each has a separate class.
   • active_tab_class: Again, use this option to style the ‘selected’ tabs individually. This option will override the master active_tab_class option described above. The plugin first checks to see if this option exists. If it does not exist, then the plugin will use the master active_tab_class option. (one or the other must exist).
8. carousel: Use this option to create a carousel effect. I needed this option for my Intriguingminds.com (link) site. While there are other JQuery Carousel plugins, adding this option to the imAnimTabber plugin wasn’t difficult because much of the functionality was the same. Note: When using the carousel option, the tabs can’t be styled individually, so be sure to use the master active_tab_class if you want the tab to look differently when selected. To setup the carousel effect, you need the following options:
   • slide_container: This is the container that holds all of the ‘slides’ (and does the actual sliding). Note: When styling the ‘slides’, make sure to use float: “left” for each slide.

   slide_parent: This is the container for the slide_container. The slide_container will move inside the slide parent (the individual slides don’t move, that is why each slide must be styled with float: “left”). It is important when styling the slide_parent to set the overflow = hidden.

   • num_slides: The number of total slides.

Examples

Example 1

This example could be used for an UpSideDownTabber. The ‘slide’ option is set by default and the mode is set to ‘auto’ by default. I changed the ‘queue’ option to false so that animation will occur simultaneously.

$("#slider").imAnimTabber({
     tab_container: 'tab_cntnr',
     active_tab_class: 'selected',
     //don't need set attribute option - 'slide is the default
     //attribute: 'slide',
     tabs: [{"caption": "Recent", "content_id": "Recent"},
           {"caption": "Links", "content_id": "Links"},
           {"caption": "About", "content_id": "about"} ],
          queue: false
});

Example 2
This is an example of using the imAnimTabber to create a carousel effect.

$("#portfolio").imAnimTabber({
     mode:'manual',
     active_tab_class: "selected",
     //tab_container must be used with carousel option
     tab_container: 'design_menu',
     //carousel only works in manual mode. Also, can't style tabs individually
     carousel: {"slide_container": "detailContainer", "slide_parent": "portfolio", "num_slides": 4}
});

To view demos of this plugin, click here. You can download the plugin from Google Code. The demo will also show you how to setup the styles for the plugin. You’ll notice in the demo style sheet that I added:

:focus { -moz-outline-style: none; }

This style will remove the selection border from around your tabs for mozilla-based browsers. For more information, see this post. I hope you enjoy. Contact me if you have any further questions.