McTabs - the easy to use jQuery Tabs

Demo:

McTabs - jQuery Tabs

jquery tabs

McTabs lets you easily create tabbed content. Simply ul-li elements and a couple of related content divs, the markup is semantic and HTML/HTML5 compatible.

McTabs supports nested jQuery tabs, Ajax tabs, auto advance, selecting tabs by mouse over or click, fade transitions, bookmark anchors, etc.

Click the options on the right to see the differences.(mark1)

Multiple or Nested Tabs

nested tabs

You can have multiple McTabs on a page, either nested or unnested.

You can configure each McTabs with different option settings, and even have different CSS styles.

Configure jQuery Tabs:

event: click   mouseover

animate: 0   100   300

autoAdvance: 0   3 seconds
Bookmarks:

 

Templates:    

McTabs is the advanced version of the Menucool Tabbed Content. It requires a license ($20 per domain. Check FAQ for more info).

Two versions of McTabs widget are available: the jQuery McTabs, and the plain JavaScript McTabs. Both versions are the same in functionality, usage and performance, except that the jQuery version requires an extra link to the jQuery library on your page.


Current version v.2014.2.25. The download contains demos and source code

Download jQuery version
or
Download plain Javascript version

 

  • Ajax Support

    Load content from another page/document that can be any web page, xml, or json document. See Ajax Tabs for details.

  • On DOM ready

    Initiates the tab content as early as when the DOM ready (either jQuery version or plain JavaScript version).

  • Select tabs by mouse click or by mouse over

    You can set the tabs to be selected by mouse click, or by mouse over

  • Multiple McTabs and nested McTabs

    Can have multiple McTabs instances on one page (nested tabs also allowed)

  • Smooth transitions

    Optional. Fading animation between swapping panels.

  • Auto advance

    Tabs can automatically cycle at a specified interval

  • Persistence

    Optional. The most recently clicked tab is remembered even if the page is reloaded or revisited within the browser session.

  • SEO friendly

    Normal tab links (href="#abc") point semantically to their target content;

    Ajax tabs link directly to their Ajax content page, which is completely the Hijax approach that enables crawlers see what users see.

  • Bookmarkable

    Bookmark links can target any element within a content panel (see Bookmark Link). The bookmark link can be anywhere on the page, even from another page (see URL Hash).

  • Appearance is fully customizable

    Style is completely customizable via the mctabs.css file

  • Dynamic

    Supports dynamically add/remove/update tabs and contents

  • Event handler

    onTabSelect event handler is available to perform extra tasks

  • Default active tab is configurable

    You can configure the default active tab when the page is launched.

  • Valid HTML markup

    Completely valid HTML/XHTML/HTML5 markup. The Tabs can be used in responsive layout.

  • Wide browser support

    Cross browser   (IE: IE7 and up)

  • Full Accessibility

    Contents are fully accessible to JavaScript disabled users.

  1. Download the source code from one of the Download buttons above, and put the downloaded jquery-tabs.js file (or javascript-tabs.js) and one of the template folders into your web application.
  2. Insert the script and CSS stylesheet links into the head section of your page:

    <script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <link href="tabs/template1/mctabs.css" rel="stylesheet" type="text/css" />
    <script src="tabs/jquery-tabs.js" type="text/javascript"></script>

    Note: The link to the jQuery library must be placed before jquery-tabs.js
    or, if you will use the plain JavaScript version of the McTabs:
    <link href="tabs/template1/mctabs.css" rel="stylesheet" type="text/css" />
    <script src="tabs/javascript-tabs.js" type="text/javascript"></script>
  3. HTML:

    Add the tabs and contents to your page:

    <ul id="tabs1" class="mctabs"> <li><a href="#view1">Features</a></li> <li><a href="#view2">How to Use</a></li> <li><a href="#view3">Source Code</a></li> </ul> <div class="panel-container"> <div id="view1"> content 1 </div> <div id="view2"> content 2 </div> <div id="view3"> content 3 </div> </div>

    Note: If you have Ajax Tabs that will load content from external pages/documents, please visit Ajax Tabs for details.

  4. Customize the script:

    Open the script (jquery-tabs.js or javascript-tabs.js) with Notepad, and edit it to your desired value:

    var mctabsGlobalOptions = { event: "click", //"click", or "mouseover" autoAdvance: 0, //0 means no autoAdvance persist: true, animate: 200, //set to 0 if no transitional effect is required updateHash: true, license: "mylicense" };
    Overriding the global options

    If you have multiple McTabs on the page, and you want each to have different options, you can directly add data-options attribute to the tabs’ root elemet, UL, to specify the specific options that will override the mctabsGlobalOptions.

    Example 1:

    <ul id="tabs2" class="mctabs" data-options="{ event: 'mouseover'}"> . . . </ul>
    Example 2:
    <ul id="tabs3" class="mctabs" data-options="{animate:0, updateHash:false}"> . . . </ul>
  5. Install License:

    US$20.   For details please visit the License section under the FAQ tab.

  • Configure the Options

    See the Customize the script under the Installation tab

  • Ajax Tab

    Visit Ajax Tabs - Fetch external content via Ajax for details

  • Multiple McTabs on the Same Page

    You can have multiple McTabs on a page, either nested or unnested, each with an unique id.

  • Other Ways to Select a Tab

    Usually we select a tab by clicking on the tab. However, McTabs also supports other ways to select a tab.

    <a href="#v3">click to test</a>
    click to test
    or:
    <a href="#v3" data-scroll="false">click to test</a>
    click to test
    or:
    <a href="#v3" data-scroll="200">click to test</a>
    click to test

    • The bookmark link can be placed anywhere on the page
    • The bookmark hash id ("v3" in this example) can be either a target content panel id, or any element id.
    • If the target element("v3") is a tab content panel, or an element within the panel, clicking on the bookmark will select the corresponding tab.
    • By default, the browser will also scroll to the target after selecting the tab. To disable the scrolling, set data-scroll="false" attribute to the bookmark link.
    • If you assign a number to the data-scroll, it will scroll to the target element with an offset.
      For example: data-scroll="200" will scroll to the target with a 200px offset (default is 50px).

    If a URL contains a hash mark, and the hash mark is a tab content panel id or an element id that is within a tab content panel, the navigation to the page will select the corresponding tab, and scroll to the mark element by default.

    <a href="page1.html#v3">will scroll</a>

    You can add a query "data-scroll=false" to the URL to disable the scrolling

    <a href="page1.html#v3?data-scroll=false">no scroll</a>

    Or you can cutomize the offset of the mark position: "data-scroll=120"

    <a href="page1.html#v3?data-scroll=120">no scroll</a>

    Notice that the ?data-scroll=... should be added after the hash

    (McTabs instance).select(indexOrTargetId, scroll);

    • McTabs instance: the McTabs instance name. tabbers is a collection of all McTabs on a page. Each McTabs instance can be accessed by the following approaches:
      • tabbers[index]: For example,
        tabbers[0].select(0, false);
      • tabbers.getTabberById(id): For example,
        tabbers.getTabberById("tabs1").select("view2", true);
    • indexOrTargetId: it can be the tab index (0-based), or the target element id(either a target content panel id, or an element id within a content panel.)
    • scroll: it can be:
      • boolean: true or false
      • integer: when the second parameter is an integer number, the scroll will be true and the offset to the target position will be the interger value (in pixels). For example:
        tabbers[0].select('v3', 120)
  • Default Tab

    Usually the first tab will be selected by default when the page is lauched.

    If you want other tabs to be selected by default, just declare class="selected" to the LI element of the tab:

    <li class="selected">Tab 3</li>
  • Create/Update jQuery Tabs Dynamically

    McTabs provides a built-in function, init(), that will initiate the McTabs instance at any time. This makes it possible to create/update jQuery Tabs at any desired time. For example, at runtime, when the data required for creating/updating the tabs is ready, you can instantiate the tabs instance by calling the function:
    tabbers.init();

    See the demo 4 code in the download package for details.

    tabbers is a collection of all McTabs on a page. Its init() function will be called when the documen DOM is ready. If McTabs markup is not ready at that time, init() will do nothing. That's why you have to call its init() function when the McTabs HTML code is genereated at a later time.

    For more information about tabbers, please read the tab's select function.

  • onTabSelect Event Handler

    onTabSelect event handler is a function that will be triggered by every tab selecting event. It provids a way to perform additional tasks when a tab is selected.

    The handler function has three passed in parameters: the index of the selected tab (0-based), the content element corresponding to the tab, and the tabberId (the id of the UL element that contains the tabs).

    For example (excerpt from the demo 4 in the download package):

    function onTabSelect(index, targetElm, tabberId) { if (tabberId == "tabs1") { var span1 = document.getElementById("span1"); span1.innerHTML = "Index " + index + " of " + tabberId + ", Content count: " + targetElm.innerHTML.length; var img1 = document.getElementById("img1"); img1.src = "content/tabs-" + index + ".jpg"; } }
  • License
    • About the license and purchase
      • License Fee: US$20.00
        Buy License Now
        1. The license is issued on a per-domain basis (valid for one domain and its sub-domains)
        2. The license is valid forever for future updates/upgrades with no requirement to renew
        3. The acquired license should be set to the license property in the jquery-tabs.js(or javascript-tabs.js) file
        4. The McTabs may not work properly, and will periodically show a purchase reminder if the verification fails. Under your development environment(localhost server or local file path), you can temporarily set the license as "6580t" to disable the purchase reminder.

        When you have acquired the license, open the jquery-tabs.js(or javascript-tabs.js) with Notepad, and update the license property:

        var mctabsGlobalOptions= { . . . . . . license: "yourlicense" };
    • Does the license validation connect to another server?
      • No. The McTabs script will check the domain name on the address bar of your browser and do the validation by mapping it to the license key through the script's own mechanism. There is no other service involved.
    • License for multiple domains
      • Question:

        We have 2 internal URLs that we use to connect to our Intranet (i.e. http://intranet and http://myintranet). And in addition to hosting this site on our Intranet, we also host a secured version of our site on a different URL, i.e. https://intranet.domain.com. Although we use different URLs, the sites point to the same files on the server. How do we deal with this?

        Do you offer per-developer license? If not, I wouldn't have an issue with buying 3 different licenses, but the problem is where to update the license keys, because we share the same files.

        Answer:

        We do not offer license that is on per-developer basis.

        The license mechanism in the McTabs script will not care about http://, https://, and www.. So intranet domain and https is not a problem.

        You can add a piece of code just after the var mctabsGlobalOptions block in the jquery-tabs.js(or javascript-tabs.js) file to handle the different domains. Below is a sample for the 3 domains:

        var mctabsGlobalOptions = { . . . license: "license1" }; if(document.domain.indexOf("domain2.com")!=-1) mctabsGlobalOptions.license = "license2"; else if (document.domain.indexOf("domain3.com")!=-1) mctabsGlobalOptions.license = "license3"; * McTabs . . . (the followings are remain unchanged)

        Note: domain2.com and domain3.com must be in lower case.

         

  • Styles and Templates
    • I have multiple McTabs on the same page. Can I show them in different styles (templates)?
      • Yes you can. Firstly you need to know this CSS rule:
        1. If two selectors apply to the same element, the one with higher specificity wins.
        2. ID selectors have a higher specificity than class selectors.

        Currently we are using the class selector to set the styles so that one css file can make all McTabs have the style. But when you want them to have different styles, we have to make one of the McTabs to use the ID selectors.

        For example, if you want the <ul id="tabs1" class="mctabs"> . . . </ul> to use the "templates2/mctabs.css", you can:

        1. 1. Link the "templates2/mctabs.css" in the head section;
        2. 2. Give an id="tabs1-panel-container" to its content panel container in your HTML markup:
          <div id="tabs1-panel-container" class="panel-container"> . . . </div>
        3. 3. Open the file templates2/mctabs.css with Notepad, and
          • replace all ".mctabs" with "#tabs1";
          • replace all ".panel-container" with "#tabs1-panel-container".

        Then your tabs1 will have a different style than your other McTabs on the same page.
         

event:

"click" or "mouseover".

Sets to "click" to select tab by mouse click;
Set to "mouseover" to select tab by mouse over.

autoAdvance:

Integer or decimal number specifying the interval in seconds for auto advance. Set to 0 to disable the auto advance.

The auto advance will be delayed when the mouse is hovering over the content panel.

If you want the auto advance to be terminated when one of the tabs is manually selected, you can add ".001" to the autoAdvance value. For example: 3.001.

persist:

true or false.

Sets to true to keep the the most recently opened tab be remembered and be selected even if the page is reloaded or revisited.

Only valid within the browser session.

animate:

Integer. The transition duration in milliseconds when swapping content panels. The smaller, the faster.

Set it to 0 (zero) if no transitional effect is required.

updateHash:

true or false

Tells McTabs whether to update the browser window's URL hash when selecting tabs. It will support browser's back/forward button navigation when enabled.

license:

Place to set your license. Please refer to the License section under the FAQ tab for details.

It will open and scroll to <div id="v3"> . . . </div> element.
It will open <div id="v3"> . . . </div> element. No scroll. Just like selecting tab 3.
Select tab 3. It will scroll to the #v3 element with offset 200px.

Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered