浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery选项卡/Tabs 2016-07-13

人气9232

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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: '优设计(ui3g)',
  data: {
    timeAdded: +new Date()
  }
});
                
              

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:173.22KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1910.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery时尚Chrome浏览器样式Tabs选项卡特效

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有3 评论)