Chrome Style Auto Resizing jQuery UI Tabs - overflowResize

Chrome Style Auto Resizing jQuery UI Tabs - overflowResize
File Size: 11.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

overflowResize 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:

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.

<script src="ui.tabs.overflowResize.js"></script>
<link rel="stylesheet" href="ui.tabs.overflowResize.css">
<script src="ui.tabs.closable.js"></script>
<script src="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('overflowResize')
  .find( ".ui-tabs-nav" ).sortable({
    distance: 10
  });

Change log:

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.