Add Navigation Buttons To jQuery UI Tabs Widget - Tabs.Neighbors
File Size: | 8.04 KB |
---|---|
Views Total: | 5803 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tabs.Neighbors is a JQuery plugin for creating navigation buttons for the default jQuery UI tabs widget that allows the visitor to switch between tabbed panels by click on the next / prev arrows.
How to use it:
1. Add jQuery library and jQuery UI to your webpage.
<link rel="stylesheet" href="/path/to/jquery-ui.css"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery-ui.min.js"></script>
2. Make sure the jquery-ui.tabs.neighbors.js
script is loaded after jQuery library.
<script src="jquery-ui.tabs.neighbors.js"></script>
3. Add next / previous buttons to the regular jQuery UI tabs widget as follow:
<div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> <li><a href="#tabs-3">Tab 3</a></li> </ul> <div id="tabs-1"> <p>Content 1</p> </div> <div id="tabs-2"> <p>Content 2</p> </div> <div id="tabs-3"> <p>Content 3</p> </div> <button class="prev"><</button> <button class="next">></button> </div>
4. Initialize the tabs widget and active the navigation buttons.
$('#tabs').tabs({ neighbors: { prev: $('button.prev'), next: $('button.next') } });
5. Style the navigation buttons in the CSS.
button { ... } button.prev { ... } button.next { ... }
Change log:
2017-02-17
- v1.0.3
This awesome jQuery plugin is developed by asleepwalker. For more Advanced Usages, please check the demo page or visit the official website.