jQuery时尚Chrome浏览器样式Tabs选项卡特效

chrome-tabs是一款效果非常时尚大方的仿谷歌Chrome浏览器样式的Tabs选项卡jQuery插件。该选项卡插件中的tab可以只有拖动，排序，可以关闭和新建某个tab，并提供了黑色和白色两种主题样式的Tabs选项卡。

使用方法

使用该Chrome浏览器样式的Tabs选项卡插件首先要引入jQuery和jQuery UI，以及chrome-tabs.js和chrome-tabs.css文件。

<link rel="stylesheet" href="css/chrome-tabs.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/chrome-tabs.js"></script>              
              

HTML结构

这个Chrome浏览器样式的Tabs选项卡使用的是嵌套<div>的HTML结构。

<div class="chrome-tabs-shell">
  <div class="chrome-tabs">
    <div class="chrome-tab">
      <div class="chrome-tab-favicon" style="background-image: url('1.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('2.ico')"></div>
      <div class="chrome-tab-title"><a href="#">Facebook</a></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>            
              

初始化插件

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

添加一个新的Tab

可以使用下面的方法来添加一个新的选项卡Tab。在Demo中双击选项卡条的空白处可以添加新的Tab。

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