当前位置:主页 > 网页特效 > TAB标签 >

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

发布时间:2018/07/05 来源:互联网 浏览: 关键词:jquery 选项卡 tab 
jQuery时尚Chrome浏览器样式Tabs选项卡特效 jQuery时尚Chrome浏览器样式Tabs选项卡特效
阿里云

简要教程

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

使用方法

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

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

HTML结构

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

<divclass="chrome-tabs-shell">
  <divclass="chrome-tabs">
    <divclass="chrome-tab">
      <divclass="chrome-tab-favicon"style="background-image: url('1.ico')"></div>
      <divclass="chrome-tab-title">Google</div>
      <divclass="chrome-tab-close"></div>
      <divclass="chrome-tab-curves">
        <divclass="chrome-tab-curves-left-shadow"></div>
        <divclass="chrome-tab-curves-left-highlight"></div>
        <divclass="chrome-tab-curves-left"></div>
        <divclass="chrome-tab-curves-right-shadow"></div>
        <divclass="chrome-tab-curves-right-highlight"></div>
        <divclass="chrome-tab-curves-right"></div>
      </div>
    </div>
    <divclass="chrome-tab chrome-tab-current">
      <divclass="chrome-tab-favicon"style="background-image: url('2.ico')"></div>
      <divclass="chrome-tab-title"><ahref="#">Facebook</a></div>
      <divclass="chrome-tab-close"></div>
      <divclass="chrome-tab-curves">
        <divclass="chrome-tab-curves-left-shadow"></div>
        <divclass="chrome-tab-curves-left-highlight"></div>
        <divclass="chrome-tab-curves-left"></div>
        <divclass="chrome-tab-curves-right-shadow"></div>
        <divclass="chrome-tab-curves-right-highlight"></div>
        <divclass="chrome-tab-curves-right"></div>
      </div>
    </div>
  </div>
  <divclass="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: +newDate()
  }
});

共有人阅读,期待你的评论!评论
Top