jquery.autotabs

Installation

Include the autotabs assets

Download

jQuery-Plugin-For-Automatically-Creating-Tabs-autotabs

Basic usage

Tab 1

The title of this tab is read from the tab pane element's first h1, h2 or h3 child element. This is a default behavior that can be customized.
The title of this tab is read from the tab pane element's title attribute.
Because this tab pane element has neither a title attribute nor an h3 child element, the title of this tab is generated.

Create the markup for your tab panes. All tab panes for a given set of tabs should be the children of the same parent element.

            

              

                
Tab 1

                Content of tab 1
              

              
Content of tab 2

              
Content of tab 3

Apply autotabs to your element.

            $('#tabs').autotabs();

Options

Styling

Custom styling

jquery.autotabs creates the following markup and prepends it to the element on which the plugin is applied.

            <ul class="autotabs">
              
  • 
                Tab 1 label
              
    • 
              
  • 
                Tab 1 label
              
    • 
            </ul>

    The built-in styles are minimal and can easily be customized in your own stylesheet.

    Note that the autotabs and autotab CSS classes are customizable via the tabs_class and tab_class options respectively.

    The generated ids on each tab li element is also customizable via the tab_id option.

    Sliding doors

    jquery.autotabs is ready for sliding doors out of the box. There is no need for any special javascript configuration. Simply add your own sprite and your stylesheet.

    Tab 1

    Tab 2

    Tab 3

    Tab 4
                  #sliding_doors ul.autotabs li.autotab a {
                background: transparent url("images/btn_blue_sprite.gif") no-repeat right -140px;
                border: none;
                padding: 0 20px 0 0;
              }

              #sliding_doors ul.autotabs li.autotab a span {
                background: transparent url("images/btn_blue_sprite.gif") no-repeat left top;
                padding: 5px 0 4px 20px;
                display: block;
                color: #fff;
              }

              #sliding_doors ul.autotabs li.autotab.current a ,
              #sliding_doors ul.autotabs li.autotab:hover a {
                background-position: right -210px;
              }

              #sliding_doors ul.autotabs li.autotab.current a span,
              #sliding_doors ul.autotabs li.autotab:hover a span {
                background-position: left -70px;
              }

    Vertical autotabs

    Tab 5

    Tab 6

    Tab 7

    Tab 8

    Include the built-in stylesheet for vertical tabs. You can of course use your own custom stylesheet to style the tabs in any way you want.

    Set the vertical option to true.

                  $('.tabs').autotabs({
                vertical: true
              });

    Dynamic loading of tab panes via ajax

    Static content

    The content of tab panes can be loaded dynamically via ajax. To enable this, set the tab pane element's rel attribute to the url of the remote page.

    Dynamically-loaded tab panes can be mixed with statically loaded tab panes.

    To force the tabs to be reloaded via ajax whenever the tab is selected, set the force-refresh option to true. Note that your browser may use the cached response from earlier requests.

              <section class="tabs">
            
    
            
    
            
    Static content
    
          </section>
        
              $(document).ready(function() {
            $('.tabs').autotabs({
              force_refresh: true
            });
          });

    Callbacks

    Tab 1
    Tab 2
    Tab 3 - no callback defined

    The plugin provides the ability to invoke a custom callback on each tab when the tab is selected via the success.

    The success option is either:

    • A function. In this case this function is invoked when any tab is selected. The function is invoked with this referring to the selected tab pane element.
    • An associative array where:
      • The key is the id of the tab pane element
      • The value is the callback function invoked when the tab is selected. The function is invoked with this referring to the selected tab pane element.
      If no value is defined for a tab pane element, then no callback is invoked when this tap pane is selected. 
                <section class="tabs">
              
    Tab 1
    
              
    Tab 2
    
              
    Tab 3
    
            </section>
          
                $('.tabs').autotabs({
              success: function() { alert($(this).attr('id')); }
            });
          
                $('.tabs').autotabs({
              success: {
                callbacks_1: function() { alert('Id of first tab pane element: ' + $(this).attr('id')); },
                callbacks_2: function() { alert('Id of second tab pane element: ' + $(this).attr('id')); }
              }
            });