Easy and flexible jQuery tabbed functionality without all the styling.
Pull request Compare This branch is 87 commits behind JangoSteve:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
javascripts
.gitignore
README.markdown

README.markdown

jQuery EasyTabs plugin 2.0.2 Copyright (c) 2010-2011 Steve Schwartz (JangoSteve)

Dual licensed under the MIT and GPL licenses.


Full Documentation and Demos

Updates and new features for v1.1.2

Updates and new features for v2.0

Download jQuery EasyTabs

Fork and view source code


JQuery EasyTabs Plugin

Anyone that has used the tabs functionality included in JQuery UI knows that it's a great tool that allows you to create great-looking themed tabs right out of the box. However, if you have need to customize those tabs significantly for your site, it can be a real pain.

After struggling to create highly customized tabs (custom layout, tabs below the content, etc.), we finally decided to create our own plugin. Rather than styling and arranging your tabs for you, like JQuery UI tabs, this plugin handles only the functionality of the tabs, and leaves the styling to you. With EasyTabs, you control the styling via your own CSS. Let's get started!

What EasyTabs Does:

  • Creates tabs from an unordered list, which link to divs on the page
  • Allows complete customization of appearance, layout, and style via CSS
  • Supports forward- and back-button in browsers
  • Tabs are bookmarkable and SEO-friendly
  • Tabs can be cycled at a specified interval

What EasyTabs Does NOT Do:

  • Style your tabs in any way (not through javascript or CSS)
  • Load AJAX content, or anything not already on the page

Documentation

  • Installation
  • Stylization
  • Configuration Options
  • Demos

Installation

The HTML

Unlike JQuery UI tabs, the HTML markup for your tabs and content can be arranged however you want. At the minimum, you need a container, an unordered list of links for your tabs, and matching divs for your tabbed content.

<div id="tab-container">
  <ul>
    <li><a href="#tab-1-div">Tab 1</a></li>
    <li><a href="#that-other-tab">The Second Tab</a></li>
    <li><a href="#lastly">Tab C</a></li>
  </ul>
  <div id="tab-1-div">
    <h2>Heading 1</h2>
    <p>This is the content of the first tab.</p>
  </div>
    <div id="that-other-tab">
    <h2>Heading 2</h2>
    <p>Stuff from the second tab.</p>
  </div>
  <div id="lastly">
    <h2>Heading 3</h2>
    <p>More stuff from the last tab.</p>
  </div>
</div>

The Javascript

To enable back- and forward-button support for the users' browsers, be sure to include either the jQuery HashChange plugin (recommended) or the Address plugin before including the EasyTabs plugin. There is no other configuration required, it will just work!

<script src="/javascripts/jquery.js" type="text/javascript"></script> 
<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script> 
<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>  

<script type="text/javascript"> 
  $(document).ready(function(){ $('#tab-container').easytabs(); });
</script> 

I varied the tab ids and names just to show you how flexible this is. There is no magic going on with this plugin; it's not trying to guess the order of your tabs or what tab is associated with which <div>. Just make the id of the content <div> match the href of the tab link.

Required Markup

The only rules you need to follow are these:

  • containing <div> with a unique id
  • the container <div> contains an unordered list <ul> of links <a>

(UPDATE: As of version 1.1, this is no longer the case. You can now include your tabs anywhere within the container. It can be a <ul>, <ol>, <div>, or anything you want. The default is still a top-level <ul>, so to change it you just specify your selector with the new "tabs" option.)

  • the container div also contains content divs (for the tabbed content), each div has a unique id that matches the href property of a link in the unordered list

Other than that, go nuts. The order of the elements does NOT matter. Your <ul> could be before or after the content divs (or even between them). You can put non-tabbed content between the elements. It doesn't matter. Just make sure that the <ul> is a direct descendant of the container <div>.

div#tab-container > ul > a
div#tab-container div#tab-1
div#tab-container div#second-tab

For stylization, configuration options, and live demos, see the EasyTabs homepage.


CHANGELOG

v2.0.2

  • Fixed bug when panel div has id="data"

v2.0.1

  • Fixed IE bug and made more robust to work with links with both parameters and hash specified

v2.0

  • Changed .easyTabs() to .easytabs() with no capitalization
  • Added "easytabs:before" and "easytabs:after" events to easytabs container elements
  • Added "easytabs:midTransition" event, which occurs after the first panel is hidden and before the second one is shown
  • Added public method "select", called with $(el).easytabs('select', '#tab-two'); to change tabs directly
    • Public "select" method can now be passed with tab-selector, tab-link-selector, or tab-link-href
  • Resolved conflicts with using hashchange to enable back button with multiple easytab containers on one page
  • Bug fix: exclude links from tab-set which don't have a matching target panel
  • Namespaced click binding for tabs. now binds to click.easytabs, so a simple $(el).unbind('easytabs') will undo all bindings.
  • Bug fix: cycle interval was acting in parallel with animation speed, instead of queuing. Caused weird bug if interval set smaller than transition time.
  • Bug fix: cycling was updating hash, causing back-button build-up
  • Bug fix: animation queue was not being interrupted if tabs were clicked faster than transition was happening
  • Bug fix: URL rewriting overwriting parameters in URL