Chrome Style Auto Resizing jQuery UI Tabs - stretchy-tabs

stretchy-tabs is a collection of jQuery extensions for jQuery UI tabs that allows you to add, close, and drag'n'drop re-order tab buttons just like the Chrome tabs.

It also supports auto tab resizing based  on the container's width so that you can create as many tabs as you wish.

See also:

• Creating Chrome-style Tabs with jQuery and jQuery UI - Chrome Tabs

How to use it:

1. Include the needed 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 choice after 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 enhance the jQuery UI tabs widget.

$( ".tabpanel" ).tabs({
  closable: true, 
  addTab:true
}).tabs('stretchyTabs')
.find( ".ui-tabs-nav" ).sortable({
  distance: 10
});

5. API methods.

// 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(){
  // ...
});

Changelog:

2021-07-28

• Added tab icon

2021-06-18

• v1.0.1

2016-07-03

• don't resize when mouse is over the tabbar

 

---

This awesome jQuery plugin is developed by adamjimenez. For more Advanced Usages, please check the demo page or visit the official website.