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.

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.

Related Posts

Searchable-Select-Dropdown

A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…

country-dropdown-with-flags

A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…

Autocomplete-and-Typeahead-Javascript-Library

Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…

Bootstrap-Notification-Message-Alert-Plugin

Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…

jquery-google-chart-plugin

jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…

free-vue-chart-library

Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…