JavaScript插件Tab选项卡效果

前端之家收集整理的这篇文章主要介绍了JavaScript插件Tab选项卡效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

闲来无事,研究了一下JavaScript插件的写法,今天就将自己写的一个小插件记录下来。

本文介绍了此款插件的基本用法,实现的功能以及代码

首先,来看看最终效果

这是一款普通的Tab选项卡插件,下面来讲讲它实现了哪些功能

1、支持不同鼠标事件触发选项卡切换效果; 2、支持不同切换效果的配置,例如淡入淡出/直接切换; 3、支持默认展示第几个选项卡的配置; 4、支持选项卡的自动切换效果

例子很简单,需要用到的知识包括: 1、html、css的基础知识; 2、对this,prototype,new等关键词的理解。

简而言之,就是通过参数配置的形式来完成不同效果的展示。

下面先看一看如何使用:

1、$(".js-tab").etab(); 2、$(".js-tab").etab({ triggerType: "click", effect: "fade", invoke: 2, auto: 3000 }); 3、Tab.init($(".js-tab"));

插件支持几种不同的初始化方式,代码很简单,类似于BootStrap插件的使用方法。下面奉上完整的代码

index.html

<Meta charset="UTF-8"> Tab选项卡 * { margin:0; padding:0; } body { background-color: #323232; font-size:12px; font-family:微软雅黑; padding:100px; } ul,li { list-style-type: none; }
  • <div class="content-wrap">
    <div class="content-item current">

    新闻

    @H_
    403_42@
    电影 @H_403_42@
    娱乐 @H_403_42@
    科技 @H_403_42@ @H_403_42@ @H_403_42@ @H_403_42@
    .tab .tab-nav {
    height: 30px;
    }

    .tab .tab-nav li {
    float: left;
    margin-right:5px;
    background-color:#767676;
    border-radius:3px 3px 0 0;
    }

    .tab .tab-nav li a{
    display:block;
    height:30px;
    padding:0 20px;
    color: white;
    line-height:30px;
    text-decoration: none;
    }

    .tab .tab-nav .active {
    background-color: #fff;

    }

    .tab .tab-nav .active a{
    color: #777;
    }

    .tab .content-wrap{
    background-color: white;
    padding:5px;
    height:200px
    }

    .tab .content-wrap .content-item {
    position:absolute;
    height: 200px;
    display: none;
    }

    .tab .content-wrap .current {
    height: 200px;
    display: block;
    }

    @H_403_42@

    最后将插件代码列出来,在代码里面已经写了很详细的注释:

    var Tab = function(tab,_params) {
    var _this = this;

    //保存单个Tab组件
    this.tab = tab;

    this.params = _params;

    //默认配置参数
    this.config = {
    //用来定义鼠标的出发类型 "click"/mouseover
    "triggerType": "mouseover",//用来定义内容切换效果,直接切换/淡入淡出
    "effect": "default",//默认展示第几个Tab
    "invoke": "1",//用来定义Tab是否自动切换,当指定了事件间隔,就表示自动切换,并指定了切换间隔
    "auto": false
    };

    //如果配置参数存在,就扩展默认的配置参数
    if(this.params){
    $.extend(this.config,this.params);
    }

    //保存Tab标签列表,以及对应的内容列表
    this.tabItem = this.tab.find("ul.tab-nav li");
    this.contentItem = this.tab.find("div.content-wrap .content-item");

    //保存配置参数
    var config = this.config;

    if(config.triggerType === "click") {
    this.tabItem.bind(config.triggerType,function() {
    _this.invoke($(this));
    });

    } else {
    this.tabItem.mouseover(function(){
    _this.invoke($(this));
    });
    }

    //自动切换功能
    if(config.auto) {
    this.timmer = null;

    //计数器
    this.loop = 0;

    this.autoPlay();

    this.tab.hover(function() {
    window.clearInterval(_this.timmer);
    },function() {
    _this.autoPlay();
    });
    }

    //设置默认显示第几个Tab
    if(config.invoke > 1) {
    this.invoke(this.tabItem.eq(config.invoke - 1));
    }

    };

    Tab.prototype = {

    //事件驱动函数
    invoke: function(currentTab) {

    /**

    • 1、执行Tab选中状态,当前选中Tab加上Active, 2、切换对应Tab内容,根据配置参数effect参数default|fade
      /

    var index = currentTab.index();
    var conItem = this.contentItem;

    //Tab切换
    currentTab.addClass("active").siblings().removeClass("active");

    //内容区域切换
    var effect = this.config.effect;

    if(effect === "fade") {
    conItem.eq(index).fadeIn().siblings().fadeOut();
    } else {
    conItem.eq(index).addClass("current").siblings().removeClass("current");
    }

    //注意,如果配置了自动切换,记得把当前的loop值设置为当前的Tab的index
    if(this.config.auto) {
    this.loop = index;
    }
    },//自动间隔切换
    autoPlay: function() {

    var this = this,tabItems = this.tabItem,//临时保存Tab列表
    tabLength = tabItems.size(),config = this.config;

    this.timmer = window.setInterval(function() {
    this.loop++;
    if(this.loop >= tabLength) {
    this.loop = 0;
    }

    tabItems.eq(_this_.loop).trigger(config.triggerType);

    },config.auto);

    }
    };

    Tab.init = function(tabs) {
    var this = this;
    tabs.each(function() {
    new this($(this));
    });
    // var tab = new Tab($(".js-tab").eq(0));
    };

    //注册成JQuery方法
    $.fn.extend({
    etab: function(_param) {
    this.each(function () {
    new Tab($(this),_param);
    });
    return this;
    }
    });

    window.Tab = Tab;

    })(jQuery);

    @H_403_42@

    如此看来,是不是很简单,一起来动手试试吧!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的JavaScript相关文章