Simple Tabbed Content Slider Plugin For jQuery - tabbedcontent

Simple Tabbed Content Slider Plugin For jQuery - tabbedcontent
File Size: 31.1 KB
Views Total:
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:

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.