Simple Tabbed Content Slider Plugin For jQuery - tabbedcontent
File Size: | 31.1 KB |
---|---|
Views Total: | 11041 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

tabbedcontent is a jQuery based tabs plugin that provides a simple way to quickly create your own tabbed content slider with a bit codes.
Features:
- Support for error detecting
- Support for call back event
- Support for switching to a tab using build-in API
You might also like:
- Flexible-jQuery-Tabbed-Interface-Plugin-SmartTab
- Tabbed Content Slider Plugin with jQuery and XML - tNews
- Google Play Tabbed Navigation with jQuery and CSS3
- Simple jQuery Tab Navigation Menu Plugin - simpleTab
- Android-Like jQuery Tab Navigation Plugin - ShiftyNav
How to use it:
1. Include jQuery library and tabbedcontent.js on your web page
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="./jquery.tabbedcontent.js"></script>
2. The Html
<div class="wrapper"> <ul> <li><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> <li><a href="#tab-3">Tab 3</a></li> <li><a href="#tab-n">Tab N</a></li> </ul> <div class="tabscontent"> <div id="tab-1"> Tab 1 Content </div> <div id="tab-2"> Tab 2 Content </div> <div id="tab-3"> Tab 3 Content </div> ... <div id="tab-n"> Tab n Content </div> </div> </div>
3. The javascript
<script> var tabs; jQuery(function($) { tabs = $('.tabscontent').tabbedContent().data('api'); $('a[href=#click-to-switch]').on('click', function(e) { var tab = prompt('Tab to switch to (number or id)?'); if (!tabs.switch(tab)) { alert('That tab does not exist :\\'); } e.preventDefault(); }); }); </script>
4. All options
$('.tabscontent').tabbedContent({ // The tabs itself. // By default it selects the links contained in the previous wrapper or the links inside ".tabs a" if there's no previous item links : tabcontent.prev().find('a').length ? tabcontent.prev().find('a') : '.tabs a', // false to disable errorSelector : '.error-message', // speed of the show effect. Set to null or false to disable speed : false, // onSwitch callback onSwitch : false, // onInit callback onInit : false, // current selected tab class (is set to the <a> element) currentClass : 'active', // tab error class tabErrorClass : 'has-errors', // if set to true will loop between tabs when using the next() and prev() api methods loop : false });
5. Methods.
var mytabs = $('.tabscontent').tabbedContent().data('api'); // now you can use the switch method: mytabs.switch('#tab-1'); // or using it's index... mytabs.switch(0); // note that first tab begins at 0 // you can also switch using id (whout #) and jQuery/Zepto objects mytabs.switch('tab-1'); mytabs.switch($('.tabscontent div#tab-1')); // you can also switch to next and previous tabs mytabs.next(); mytabs.prev(); // the previous example won't loop the tabs; to do so you can set loop to true when configuring tabbedContent: var mytabs = $('.tabscontent').tabbedContent({loop: true}).data('api'); // and / or you can pass it directly to the method: mytabs.next(true); mytabs.prev(true); // check if current tab is first or last if (mytabs.isFirst()) { /* do stuff */ } if (mytabs.isLast()) { /* do stuff */ }
6. Full API.
// Switch to tab 'switch' : function apiSwitch(tab) {}, // Switch to tab for old browsers 'switchTab' : function apiSwitch(tab) {}, // Get current tab index 'getCurrent' : function getCurrent() {}, // Get jQuery/Zepto object for specified tab 'getTab' : function getTab(tab) {}, // Go to next tab in the tabs set 'next' : function next(loop) {}, // Go to previous tab in the tabs set 'prev' : function prev(loop) {}, // Returns true if current tab is first tab 'isFirst' : function isFirst() {}, // Returns true if current tab is last tab 'isLast' : function isLast() {}
Change Logs:
2017-05-22
- v1.7.0
2015-06-26
- Fixed getCurrent method not properly returning current tab
- Added bootstrap demo with multiple tabbed contents
1.5.0 (2015-04-19)
- Now the tab error class is defined to tabs (instead of tab contents)
1.3.0 (2014-03-29)
- New isFirst method
- New isLast method
- Improved performance removing repetitive calls to getCurrent method
- Updated readme file with information about isFirst and isLast
- Now onInit and onSwitch both have params to access the api, check the readme for details
(2013-11-25)
- Added four new API methods: getCurrent(), getCurrentId(), next(loop) and prev(loop)
- Added "next" and "prev" buttons to tabs content using new API method
This awesome jQuery plugin is developed by elboletaire. For more Advanced Usages, please check the demo page or visit the official website.