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() } });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!