|File Size:||1.12 MB|
|Official Website:||Go to website|
ScrollTabs is a jQuery plugin to create customizable, dynamic, smart and responsive tabs for wide tab-interface applications that automatic adjust to detect whether scrolling is needed. One of the greatest features for jQuery ScrollTabs is that you can have different right-and-left side styling depending on if scrolling is required.
How to use it:
1. Load the jQuery ScrollTabs plugin's CSS in the head section of the web page.
<link rel="stylesheet" href="css/scrolltabs.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.scrolltabs.js"></script>
3. Load the jQuery mousewheel plugin to enable mouse wheel on your scrollable tabs.
4. Create tabs for your tabbed interface.
<div id="tabs-demo"> <span> Tab 1 </span> <span> Tab 2 </span> <span> Tab 3 </span> ... </div>
5. Call the plugin with default options.
6. Optional settings.
- domObject - Access the DOM Object that this TabSet was created on.
- addTab(html, position) - Add a tab to the ScrollTabs interface. The new tab is created from the HTML string that you pass to this method. Providing an HTML string provides you with the full flexibility to augment your span tag fully to meet the needs of your specific use-case. Optionally, you may pass a position value, which if not provided will default to placing the new tab as the last tab. The positions are zero-indexed, and the new tab will shift all items at and past the indicated position down one item.
- removeTabs(jQuerySelector) - Removes all the items that are returned by the jQuery selector string (scoped within this object).
- clearTabs() - Removes all the items in this ScrollTabs object.
- destroy() - Destroys the ScrollTabs instance formatting, leaving only the raw HTML contents. This is effectively the opposite of the ScrollTabs initialization.
- hideTabs(jQuerySelector) - Hide tabs based on the jQuery Selector. This is for situations where you may not want to completely remove a tab, but want to temporarily hide it.
- showTabs(jQuerySelector) - Shows hidden tabs based on the jQuery Selector.
- Add image-based example.
- Some additional documentation, better CSS styling for better backwards-compatability with older browsers.