Creating Chrome-style Tabs with jQuery and jQuery UI - Chrome Tabs
File Size: | 107 KB |
---|---|
Views Total: | 6075 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.