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.

Multiple or Nested Tabs

nested tabs

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

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

event: click   mouseover

animate: 0   100   300

autoAdvance: 0   3 seconds
Bookmarks:

 

Templates:    1   2   3   4  

McTabs - the easy to use jQuery Tabs

McTabs is the advanced version of the Menucool Tabbed Content.

License ($20.00) is required for using this widget.


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

Download jQuery version   or   Download plain Javascript version

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

 

  • 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 target;

    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).

  • Default active tab is configurable

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

  • Dynamic

    Supports dynamically add/remove/update tabs and contents

  • Event handler

    onTabSelect event handler is available to perform extra tasks

  • Wide browser support

    (IE: IE7+)

  • Full Accessibility

    Contents are fully accessible to JavaScript disabled users.

  1. Download the source code, put the jquery-tabs.js file (or javascript-tabs.js) and one template folder 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" };
    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 for details.

    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:

    License Fee: $20.00
    About License

  • 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).
    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.

    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 provides 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 Fee: $20.00

  • License is required for using the McTabs widget. Without a valid license, the McTabs may not work properly, and will periodically show a purchase reminder on the page.
  • Under local development environment (localhost server or local file path), you can use the license "6580t" to disable the reminder.
  • The license is issued on a per-domain basis (valid for a domain and its sub-domains). Intranet domains and IP domains are also allowed.
  • You can use the licensed widget multiple times within the website for which you've purchased the license.
  • When you have acquired the license, open the javascript-tabs.js file with Notepad, and update the license value accordingly. var mctabsGlobalOptions= { . . . . . . license: "mylicense" };

FAQ about License

  1. How the license works? Does it go to another web service to verify? Answer
  2. Will it work for sub-domains? Answer
  3. My website is on intranet. Do I need license for using your widgets in my intranet website? Answer
  4. Do you provide developer license that can be applied to multiple websites? Answer
  5. I have multiple domain names pointing to the same website. Can I apply multiple licenses to the same script? Answer
  6. Do I need to renew the license for future upgrades/releases of the widget? Answer
You need to set the acquired license key to the license property in the widget's JavaScript file.

The JavaScript will use its own match pattern code to verify the license with the domain name on the browser's address bar. The JavaScript file will perform the validation by itself and no other services will be involved.

Yes. If the license is valid for the main domain, it will also be valid for all its sub-domains(such as sub1.mydomain.com, sub2.mydomain.com).
Yes. License is required for intranet websites, and you can apply for license for intranet domains.
No. It is on a per-domain basis only.
Yes, it is supported. The following links are the instructions:

For JS Image Slider     For Ninja Slider     For ddmenu     For JS Tooltip

Note:
  • If your domain2.com will be redirected to your domain1.com, you only need a license for domain1.com. You don't need multiple licenses in this scenario.
  • If your multiple domains are obviously for the same site, such as menucool.com, menucool.net, menucool.com.us, you can input 1/2 of the price for the second domain, 1/3 for the third domain and so on.
No. The license will be valid forever for your domain with no requirement to renew.

QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.