Tabslet – a jQuery plugin for tabs

tabslet-featured

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *