关于技术您现在的位置是:首页 > 关于技术
封装插件之-tab选项卡
2019-02-19 15:42:10 【Javascript, jQuery】 1240 人已围观 0 条评论
Tab选项卡是大多数网页中必不可少的展示功能,它可以在网页中完美的展示多列表内容,使页面布局更合理,内容展示更方便,它和轮播焦点图异曲同工,但也有本质上的不同。
Tab选项卡是大多数网页中必不可少的展示功能,它可以在网页中完美的展示多列表内容,使页面布局更合理,内容展示更方便,它和轮播焦点图异曲同工,但也有本质上的不同。平时我们可以用函数的方式完成一个tab选项卡,但是不方便我们到处调用,那么今天咱们就用面向对象的方法动手封装一个基于jQuery的tab选项卡插件。
首先,我们先搭建tab选项卡的DOM结构和CSS样式。
<div class="tab js-tab" data-config='{ "triggerType":"click", "effect":"fade", "invoke":1, "auto":3000 }'> <ul class="tab_nav"> <li class="active"><a href="javascript:;">新闻</a></li> <li><a href="javascript:;">娱乐</a></li> <li><a href="javascript:;">电影</a></li> <li><a href="javascript:;">科技</a></li> </ul> <div class="content_wrap"> <div class="content_item current">a</div> <div class="content_item">b</div> <div class="content_item">c</div> <div class="content_item">d</div> </div> </div>
CSS样式自己根据需求来写就好,这里有几个点就是,选项卡导航和对应的内容页的当前展示分别用添加active和current类来完成。
DOM结构和CSS样式完成后就是JS调用,调用的时候要先引入jQuery文件,然后调用方法如下:
$(“.js-tab”).tab();
其中$(“.js-tab”)这个对象就是选择tab选项卡执行tab()这个方法就好,参数配置在DOM结构中的data-config属性中。
{ "triggerType":"click", "effect":"fade", "invoke":2, "auto":false }
其中,
triggerType –用来定义鼠标的触发类型,是click还是mouseover;
effect –用来定义内容切换效果,是直接切换还是淡入淡出效果;
invoke –默认展示第几个tab;
auto –定义tab是否自动切换,及自动切换时间间隔;
想看不同参数配置展示不同效果的狠戳这里,完整代码下载点击这里。
嫌看代码费劲或是看不太懂的,这里还有慕课网的视频教程:https://www.imooc.com/learn/825
相关推荐
文章评论
点击排行
友情推荐
- 微信公众号:扫描加关注