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

超酷多彩jQuery Tabs选项卡插件

发布时间:2018/07/08 来源:互联网 浏览: 关键词:jquery 选项卡 tab 
超酷多彩jQuery Tabs选项卡插件 超酷多彩jQuery Tabs选项卡插件
阿里云

简要教程

colorfulTab是一款简单实用的超酷多彩jQuery Tabs选项卡插件。该选项卡插件提供多种颜色主题,可以制作背景图片动画,甚至可以自定义你自己的颜色主题。非常实用。

使用方法

实用该Tabs选项卡插件需要在页面中引入colorfulTab.min.css文件,jquery和colorfulTab.min.js文件。

<linktype="text/css"rel="stylesheet"href="css/colorfulTab.min.css">
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/colorfulTab.min.js"></script>    

HTML结构

该Tabs选项卡的基本HTML结构如下:

<divclass="colorful-tab-wrapper"id="examplaTab">
 
    <!-- Tab Menu -->
    <ulclass="colorful-tab-menu">
        <liclass="colorful-tab-menu-item active"data-color="#000">
            <ahref="#tab1">Tab 1</a>
        </li>
        <liclass="colorful-tab-menu-item"data-color="#353535">
            <ahref="#tab2">Tab 2</a>
        </li>
        <liclass="colorful-tab-menu-item"data-color="#d5d5d5">
            <ahref="#tab3">Tab 3</a>
        </li>
    </ul>
 
    <!-- Tab Content -->
    <divclass="colorful-tab-container">
        <divclass="colorful-tab-content active"id="tab1">...</div>
        <divclass="colorful-tab-content"id="tab2">...</div>
        <divclass="colorful-tab-content"id="tab3">...</div>
    </div>
 
</div>     

初始化插件

在页面DOM元素加载完毕之后,可以通过colorfulTab()方法来初始化该选项卡插件。

$("#examplaTab").colorfulTab();   

配置参数

$("#examplaTab").colorfulTab({
    theme:"flatline",
    backgroundImage:"true",
    overlayColor:"#002F68",
    overlayOpacity:"0.8"
});     

theme:选项卡的主题。可取值有:'elliptic','flatline'。

backgroundImage:是否实用背景图片动画。

overlayColor:遮罩层颜色。

overlayOpacity:遮罩层透明度。

使用backgroundImage参数时需要为每一个Tab通过data-background属性指定背景图片。

<ulclass="colorful-tab-menu">
    <liclass="colorful-tab-menu-item"data-background="image.jpg">
    ...
</ul>     

自定义主题

你可以自定义自己的主题:在SCSS文件中编写自己的主题样式代码:

.custom-theme{
    .colorful-tab-menu{
        /* custom style */
    }
    .colorful-tab-menu-item{
        /* custom style */
    }
    .colorful-tab-container{
        /* custom style */
    }
    .colorful-tab-content{
        /* custom style */
    }
}    

然后在初始化插件时通过theme参数来调用主题:

$("#exampleTab").colorfulTab({
    theme:"custom-theme"
});  

colorfulTab选项卡插件的github地址为:https://github.com/knyttneve/colorfulTab。

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