Press "Enter" to skip to content

Creating Chrome-style Tabs in HTML/CSS

Chrome Tabs is a jQuery plugin for creating draggable, sort, close, and draggable tabs like you’ve seen in Google Chrome. Drag and drop support is provided by Dragabilly by @desandro.

simple jquery tabs, tabs with slider jquery, chrome tabs js, tabs with scroll arrows, chrome tabs css, jquery sliding tabs horizontal example, tab gallery jquery, jquery scrolling tabs

Features:

  • Custom CSS styles for your tabs.
  • Resort tabs by dragging and swiping.
  • Double-click on the empty area to create a new tab.

How to make use of it:

1. Load the basic style sheet in the header section of your web page.

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

2. Coding to create a Chrome-style tab bar with multiple 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 jQuery Chrome Tabs plugin at the bottom of the webpage.

<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 JavaScript.

chromeTabs.addNewTab($chromeTabsExampleShell, {
  favicon: '/favicon.ico',
  title: ' ',
  data: {
    timeAdded: +new Date()
  }
});

chrome-tabs-css

creating chrome-style tabs with jquery, chrome tabs in chrome Plugin/Github


See Demo And Download

Official Website(adamschwartz): Click Here

This superior jQuery/javascript plugin is developed by adamschwartz. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.