web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
选项卡
超酷多彩jQuery Tabs选项卡插件
分类:
选项卡
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
##### 使用方法 实用该Tabs选项卡插件需要在页面中引入colorfulTab.min.css文件,jquery和colorfulTab.min.js文件。 ```html
``` ##### HTML结构 该Tabs选项卡的基本HTML结构如下: ```html
Tab 1
Tab 2
Tab 3
...
...
...
``` ##### 初始化插件 在页面DOM元素加载完毕之后,可以通过colorfulTab()方法来初始化该选项卡插件。 ```html $("#examplaTab").colorfulTab(); ``` ##### 配置参数 ```html $("#examplaTab").colorfulTab({ theme:"flatline", backgroundImage:"true", overlayColor: "#002F68", overlayOpacity: "0.8" }); ``` - theme:选项卡的主题。可取值有:'elliptic','flatline'。 - backgroundImage:是否实用背景图片动画。 - overlayColor:遮罩层颜色。 - overlayOpacity:遮罩层透明度。 - 使用backgroundImage参数时需要为每一个Tab通过data-background属性指定背景图片。 ```html
...
``` ##### 自定义主题 你可以自定义自己的主题:在SCSS文件中编写自己的主题样式代码: ```html .custom-theme{ .colorful-tab-menu{ /* custom style */ } .colorful-tab-menu-item{ /* custom style */ } .colorful-tab-container{ /* custom style */ } .colorful-tab-content{ /* custom style */ } } ``` 然后在初始化插件时通过theme参数来调用主题: ```html $("#exampleTab").colorfulTab({ theme:"custom-theme" }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告