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

Chrome Tabs is a jQuery plugin for creating draggable, sortable, closeable and themeable tabs as you seen in Google Chrome. 

Features:

• Custom CSS styles for your tabs.
• Re-sort tabs through drag and drag.
• Double-click the blank area to generate a new tab.

How to use it:

1. Load the core stylesheet in the head section of your web page.

<link rel="stylesheet" href="css/chrome-tabs.css">

2. The markup to create a Chrome-style tab bar with several tabs.

<div class="chrome-tabs-shell">
  <div class="chrome-tabs">
    <div class="chrome-tab">
      <div class="chrome-tab-favicon" style="background-image: url('http://www.google.com/favicon.ico')"></div>
      <div class="chrome-tab-title">Google</div>
      <div class="chrome-tab-close"></div>
      <div class="chrome-tab-curves">
        <div class="chrome-tab-curves-left-shadow"></div>
        <div class="chrome-tab-curves-left-highlight"></div>
        <div class="chrome-tab-curves-left"></div>
        <div class="chrome-tab-curves-right-shadow"></div>
        <div class="chrome-tab-curves-right-highlight"></div>
        <div class="chrome-tab-curves-right"></div>
      </div>
    </div>
    <div class="chrome-tab chrome-tab-current">
      <div class="chrome-tab-favicon" style="background-image: url('http://www.facebook.com/favicon.ico')"></div>
      <div class="chrome-tab-title">Facebook</div>
      <div class="chrome-tab-close"></div>
      <div class="chrome-tab-curves">
        <div class="chrome-tab-curves-left-shadow"></div>
        <div class="chrome-tab-curves-left-highlight"></div>
        <div class="chrome-tab-curves-left"></div>
        <div class="chrome-tab-curves-right-shadow"></div>
        <div class="chrome-tab-curves-right-highlight"></div>
        <div class="chrome-tab-curves-right"></div>
      </div>
    </div>
  </div>
  <div class="chrome-shell-bottom-bar"></div>
</div>

3. Load jQuery, jQuery UI and the jQuery Chrome Tabs plugin at the bottom of the web page.

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="js/chrome-tabs.js"></script>

4. Initialize the plugin.

var $chromeTabsExampleShell = $('.chrome-tabs-shell')
chromeTabs.init({
  $shell: $chromeTabsExampleShell,
  minWidth: 45,
  maxWidth: 160
});

5. Add a new tab in the JavaScript.

chromeTabs.addNewTab($chromeTabsExampleShell, {
  favicon: 'https://www.jqueryscript.net/favicon.ico',
  title: 'jQuery Script',
  data: {
    timeAdded: +new Date()
  }
});

---

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