|
Project Information
Members
|
minitabsjQuery plugin for unobtrusive tabs with similar interface than http://stilbuero.de/jquery/tabs/, but dramaticly simpler and lighter. UsageHTML Markupminitabs relies on the following HTML structure : <div id="container">
<ul>
<li><a href="#tab-1">Tab one</a></li>
<li><a href="#tab-2">Tab two</a></li>
<li><a href="#tab-3">Tab three</a></li>
</ul>
<div id="tab-1">
This is the first tab content
</div>
<div id="tab-2">
This is the second tab content
</div>
<div id="tab-3">
This is the third tab content
</div>
</div>This is quite standard and work fine without Javascript wich makes minitabs unobstrusive. Provide an DIV with an ID containing an unordered list of links followed by a div per page you want in the tabs. Each link URL points to the corresponding DIV id. JavascriptActivate the plugin with only one line of javascript : $('#container').minitabs();That's it. Optionally you can set the speed and/or type of the animation : $('#container').minitabs("slow"); // default effect, slow$('#container').minitabs('fast', 'fade'); // fadeIn/fadeOut effect, fast$('#container').minitabs(1000, 'slide'); // slide effect, 1000 msOf course since the plugin uses jquery you have to include it, and generally you'll want to include it. So a final page may look like this : Complete example<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://minitabs.googlecode.com/files/jquery.minitabs.js"></script>
<style type="text/css">
</style>
</head>
</html>
|
|
