当前位置：首页 > 网页特效 > 选项卡

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

分类：选项卡日期：2024-05-14 点击(7) 评论(0)

简介

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

```html
<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结构。

```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>      
```      
#####  初始化插件
```html
var $chromeTabsExampleShell = $('.chrome-tabs-shell')
chromeTabs.init({
  $shell: $chromeTabsExampleShell,
  minWidth: 45,
  maxWidth: 160
});            
```
#####  添加一个新的Tab
可以使用下面的方法来添加一个新的选项卡Tab。在Demo中双击选项卡条的空白处可以添加新的Tab。

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果