关于技术您现在的位置是:首页 > 关于技术

封装插件之-tab选项卡

头像 2019-02-19 15:42:10 , 313 人已围观 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

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号