Stretchy Tabs is a Chrome-style tab resizing for jQuery UI tabs that allows you to add, close, drag, and drop buttons to rearrange tabs just like Chrome tabs.
Must Read: Material UI Touch-Swipe Tabs Component for Vue 3
How to make use of it:
1. Include the wanted jQuery and jQuery UI libraries on the 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. Include the jQuery extensions of your selection after the jQuery library.
<!-- Core --> <script src="ui.tabs.stretchy-tabs.js"></script> <link rel="stylesheet" href="ui.tabs.stretchy-tabs.css" /> <!-- Closable Extension --> <script src="lib/ui.tabs.closable.js"></script> <!-- Add Tab Extension --> <script src="lib/ui.tabs.addTab.js"></script>
3. Create a jQuery UI tabs widget on the webpage.
<div class="tabpanel"> <ul> <li><a href="#tabs-1" class="closable">Tab 1</a></li> <li><a href="#tabs-2" class="closable">Tab 2</a></li> <li><a href="#tabs-3" class="closable">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> </div>
4. The JavaScript to boost the jQuery UI tabs widget.
$( ".tabpanel" ).tabs({ closable: true, addTab:true }).tabs('stretchyTabs') .find( ".ui-tabs-nav" ).sortable({ distance: 10 });
5. API strategies.
// add a new tab $(".tabs").tabs("add", "new tab", "content goes here"); // remove a tab $(".tabs").tabs("remove", index);
6. Event handlers.
$(".tabs").on("tabsbeforeremove", function(){ // ... }); $( ".tabs" ).on("tabsremove", function(){ // ... }); $( ".tabs" ).on("tabsadd", function(){ // ... });
See Also –
Accessible, Responsive, and Freely Redesign Tabs Plugin | Skeletabs
Easy Communication Between Tabs for Vue 2.x | vue-tabevents
Add Another Vanilla JavaScript Tabbed Content With Equal Height | sv-tabs-js
See Demo And Download
Official Website(adamjimenez): Click Here
This superior jQuery/javascript plugin is developed by adamjimenez. For extra Advanced Usage, please go to the official website.