jquery.slidingTabs
animated tabs that load content via Ajax

By Javier | Published: May 16, 2010

With jquery.slidingTabs you can create unobtrusive carousel-style tabs that load dynamic content via Ajax.

  • Tested with jQuery 1.3.2 and 1.4.2 in Internet Explorer 6-8, Firefox 2-3.6, Safari 4, Chrome.
  • Download Source (5.1Kb), Minified  (2.8kb).
  • Follow the project on GitHub or report a issue!
  • View examples in a new page

Examples

Usage

First you need to download the jquery and jquery.slidingTabs source. Include them inside the tag <head> of your document:

<script src="javascripts/jquery.1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/jquery.slidingTabs.js" type="text/javascript" charset="utf-8"></script>

Then write some HTML like this:

<div class="multi_tabs">
    <div class="menu">
      <ul>
        <li class="active"><a href="ajaxcontent.html">TAB 1</a></li>
        <li><a href="ajaxcontent.html">TAB 2</a></li>
        <li><a href="ajaxcontent.html">TAB 3</a></li>
        <li><a href="ajaxcontent.html">TAB 4</a></li>
        <li><a href="ajaxcontent.html">TAB 5</a></li>
        <li><a href="ajaxcontent.html">TAB 6</a></li>
        <li><a href="ajaxcontent.html">TAB 7</a></li>
        <li><a href="ajaxcontent.html">TAB 8</a></li>
        <li><a href="ajaxcontent.html">TAB 9</a></li>
        <li><a href="ajaxcontent.html">TAB 10</a></li>
        <li><a href="ajaxcontent.html">TAB 11</a></li>
        <li><a href="ajaxcontent.html">TAB 12</a></li>
        <li><a href="ajaxcontent.html">TAB 13</a></li>
        <li><a href="ajaxcontent.html">TAB 14</a></li>
      </ul>
    </div><!-- .menu -->
    <div class="cont_tabs">
      <div>
        First content
      </div>
    </div><!-- cont_tabs -->
  </div><!-- multitabs -->

…some styles. Note that a few basic styles are required for plugin works.

/*GENERAL STYLES*/
  * {
    margin:0;
    padding:0;
  }

  /*COMMON STYLES FOR TABS*/

  .multi_tabs {
    width:600px;
  }

  .multi_tabs .menu {
    overflow:hidden;
    position:relative;
    z-index:10;
    width:100%;
  }

  .multi_tabs ul {
    overflow:hidden;
    position:relative;
    width:9000px;
  }

  .multi_tabs ul li{
    float:left;
    display:inline;
    padding:6px 8px 4px 8px;
  }

  .multi_tabs ul li.active{
    background:#CCC;
  }

  .multi_tabs ul li a{
    display:inline;
  }

  .multi_tabs ul li.active a{
    color:#000;
  }

  .multi_tabs .cont_tabs{
    clear:both;
  }

  .multi_tabs .next,
  .multi_tabs .prev{
    position:absolute;
    display:block;
    top:0;
    width:24px;
    height:29px;
    background: #E4E4E4;
    z-index:100;
  }

  .multi_tabs .prev{
    left:0;
  }

  .multi_tabs .next{
    right:0;
  }

  .multi_tabs .accessible {
    display:none;
  }

And invoke the plugin:

<script type="text/javascript" charset="utf-8">
    $(function(){
      $('.multi_tabs').slidingTabs({
          tabs: '.menu',
          content : '.cont_tabs'
       });
    })
  </script>

Configuration

Property Type Default value Description
tabs string ‘.menu’ selector for tabs wrapper.
content string ‘.cont_tabs’ selector for content wrapper (where the content loaded via ajax goes in).
diff_widths boolean true if the tabs have equal widths set diff_widths to false, for performance issues.
offset_x number 3 offset in x for tabs.
displacement number 200 how many pixels the tabs will be animated.
requestType string ‘GET’ type of the Ajax request.
hiddenClass string ‘accessible’ class added to next and prev elements when there are more tabs to show.
next_txt string ‘Next’ next element text.
prev_txt string ‘Previous’ prev element text.
fadeIn_duration number os string ‘slow’ duration in milliseconds of the fadeIn when ajax loaded content is shown.
fadeOut_duration number or string ‘normal’ duration in milliseconds of the fadeOut when content is hidden.
animationSpeed number 500 speed for the animation of the tabs.
onSuccessCallback function function($wrap, $tabs_links, content){} function invoked when content is successfully loaded.
onFadeInCallback function function($wrap, $tabs_links, content){} function invoked when fadeIn effect ends.
onFadeOutCallback function function($wrap, $tabs_links, content){} function invoked when fadeOut effect ends.
This entry was posted in CSS, XHTML, jQuery. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>