Responsive Tabs - Mobile-friendly jQuery Tabs Plugin

1. Download the source code, put the responsive-tabs.js and one template folder into your web application.
2. Insert viewport meta, script link, and CSS stylesheet link into the head section of your page:
   
   
   • JavaScript
   • jQuery
   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="tabs/template1/responsivetabs.css" rel="stylesheet" type="text/css" /> <script src="tabs/responsive-tabs.js" type="text/javascript"></script>

   The breakpoint of switching tabs layouts for different devices is set through media queries in the stylesheet. The viewport meta tag in the code above is necessary for mobile devices to understand the media queries.

   The Responsive Tabs jQuery version has been decommissioned.
3. HTML:

   Add tabs and contents to your page:

   <ul class="rtabs"> <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 responsive-tabs.js with Notepad, and edit it to your desired settings:

   var rtabsGlobalOptions = { event: "click", //"click", or "mouseover" autoAdvance: 0, //seconds. 0 means no autoAdvance animate: 5, //seconds. set to 0 if no transitional effect is required license: "mylicense" };
   event:

   "click" or "mouseover".

   "click": selecting a tab by mouse click;
   "mouseover": selecting a tab by mouse over.

   autoAdvance:

   Decimal number specifying the interval in seconds for auto advance. Setting its value to 0 will disable the auto advance.

   The auto advance, if set, will pause when the mouse is hovering over the content panel.

   animate:

   Decimal number specifying the transition duration in seconds when swapping content panels. The animation uses the CSS3 transition.

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

   license:

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

   Overriding the global options

   If you have multiple Responsive Tabs 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 rtabsGlobalOptions.

   Example:

   <ul class="rtabs" data-options="{event: 'mouseover'}"> ... </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 Responsive Tabs on the Same Page

  You can have multiple Responsive Tabs in one page, and they can be nested.

• Other Ways to Select a Tab

  • Bookmark Link
  • URL Hash
  <a href="#b2">navigate to #b2</a>
navigate to #b2
  

  • The bookmark link can be placed anywhere on the page
  • The bookmark hash id ("b2" in this example) can be either a target content panel id, or any element id within a tabbed content panel.
  • The browser will also scroll to the target element after clicking the bookmark link.

  It will open and scroll to the <p id="b2"> . . . </p> element under the URL Hash tab.

  If we navigate to a page, and the page URL contains a hash that happens to be 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 the browser will scroll to the element.

  Element <p id="b2">...</p>

• 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 jQuery Tabs Dynamically

  Responsive Tabs provides a built-in function, init(), that will initiate the Responsive Tabs instance at any time. This makes it possible to create jQuery Tabs at later time after page load. 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();

  For details please check out the demo 4 code in the download package.

  Limitations:
  The tabbers.init() can only be called after page load, and there is no <ul class="rtabs">...</ul> element at the time of page load.

• onTabSelected Event Handler

  onTabSelected event handler is a function that will be called by each tab selecting event. It provides a way to perform additional tasks when a tab is selected.

  The handler function has two passed in parameters: the selected tab, and the content panel id.

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

  function onTabSelected(tab, panelId) { var span1 = document.getElementById("span1"); span1.innerHTML = "Selected tab: " + tab.innerHTML + ", Selected panel: " + panelId; }

• License is required for using the Responsive Tabs widget. Without a valid license, the Responsive Tabs may periodically show a trial version reminder in the tabs.
• 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 should also be licensed.
• 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 responsive-tabs.js file with Notepad, and update the license value accordingly. var rtabsGlobalOptions= { . . . . . . license: "mylicense" };

FAQ about License