Quantcast
Channel: jQuery Plugins – Designify
Viewing all articles
Browse latest Browse all 82

Tabslet – a jQuery plugin for tabs

$
0
0

Tabslet is yet another jQuery plugin for tabs but it is a bit different from the usual ones. Why is that? First of all, the great news is that it is compatible with IE7+ and also Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.11.0, 2.1.0.

Tabslet also supports custom events, rotation, animations and controls.

Here are the main features of the plugin:

  • Flexible HTML structure
  • Custom events
  • Data attribute initialization and configuration
  • Controls (next, previous)
  • Rotation (useful for banner rotators/carousels)
  • Deep linking support
  • Change tabs on mouse over
  • Use animation effect for tabs’ changing
  • Ability to use either href or alt attribute to target tab
  • Destroy and control (next, prev, show) methods

There is a simple markup that you need to follow in order to have these tabs in your project:

Tabslet – a jQuery plugin for tabs

Default Tabs:

<div class='tabs tabs_default'>
 <ul class='horizontal'>
 <li><a href="#tab-1">information</a></li>
 <li><a href="#tab-2">tab</a></li>
 <li><a href="#tab-3">tab</a></li>
 </ul>
 <div id='tab-1'><span>This is the default tab functionality.</span></div>
 <div id='tab-2'><span>Tab 2</span></div>
 <div id='tab-3'><span>Tab 3</span></div>
 </div>

Initialize the tabs:

$('.tabs').tabslet();

DEMOS DOWNLOAD

For more options, adjustments and examples, visit Tabslet.


Viewing all articles
Browse latest Browse all 82

Trending Articles