Press "Enter" to skip to content

Resize Chrome Style Stretchy Tabs for jQuery UI

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.

jquery tabs responsive, responsive tabs free download, jquery sliding tabs horizontal example, jquery tabs free download, simple jquery tabs, jquery tabs plugin

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 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">
    <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>
  <div id="tabs-1">
    <p>Content 1</p>
  <div id="tabs-2">
    <p>Content 2</p>
  <div id="tabs-3">
    <p>Content 3</p>

4. The JavaScript to boost the jQuery UI tabs widget.

$( ".tabpanel" ).tabs({
  closable: true, 
.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(){
  // ...

Chrome Style Auto Resizing jQuery UI Tabs, stretchy tabs Plugin/Github

See Demo And Download

Official Website(adamjimenez): Click Here

This superior jQuery/javascript plugin is developed by adamjimenez. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.