Responsive jQuery Tabbed Panels Plugin - Tabber
File Size: | 16.4 KB |
---|---|
Views Total: | 7102 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Tabber is a jQuery plugin to create a responsive tabs/tabbed interface that will be converted into a mobile-friendly list when the window's size has reached the breakpoint.
How to use it:
1. Load the jQuery library and JQuery tabber plugin in the web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="src/jquery.fs.tabber.js"></script>
2. Add the required jQuery tabber's stylesheet file in the head section of your page.
<link href="src/jquery.fs.tabber.css" rel="stylesheet" type="text/css" media="all" />
3. Add fixes for support of IE7/8/9.
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if IE 9]> <script src="ie/matchMedia.ie9.js"></script> <![endif]--> <!--[if LTE IE 8]> <script src="ie/matchMedia.ie8.js"></script> <![endif]-->
4. Create your tabbed interface following the html structure:
<div class="tabbed"> <nav> <a href="#tab-1" class="tabber-handle">Tab 1</a> <a href="#tab-2" class="tabber-handle">Tab 2</a> <a href="#tab-3" class="tabber-handle">Tab 3</a> ... </nav> <div class="tabber-tab" id="tab-1"> Content 1 </div> <div class="tabber-tab" id="tab-2"> Content 2 </div> <div class="tabber-tab" id="tab-3"> Content 3 </div> ... </div>
5. Add some styles to the tabbed interface.
<style> .tabber .tabber-handle { display: block; float: left; font-size: 16px; line-height: 40px; margin: 0 1px 0 0; padding: 0 20px; } .tabber a { text-decoration: none; } .tabber .tabber-handle.active { background: #eee; } .tabber .tabber-tab { background: #eee; padding: 20px; } </style>
6. Call the plugin and set the breakpoint in the javascript.
<script> $(document).ready(function() { $(".tabbed").tabber({ customClass: "", // Class applied to instance maxWidth: "980px", // Width at which to auto-disable mobile styles vertical: false // vertical tab sets }); }); </script>
Change log:
v3.0.12 (2014-09-15)
- Fixing issue with mediaquery listeners
v3.0.10 (2014-07-20)
- Finally getting the index thing worked out.
v3.0.6 (2014-05-04)
- Adding option for vertical tab sets;
v3.0.5 (2014-02-07)
- Fixing data checks;
v3.0.4 (2014-01-30)
- Fixing issues with "select" method when index is out of bounds;
- Fixing "destroy" method to properly clean up;
- Fixing demo;
v3.0.3 (2014-01-14)
- Fixing issue with active state when responding to media queries;
This awesome jQuery plugin is developed by Formstone. For more Advanced Usages, please check the demo page or visit the official website.