189 8069 5689

JavaScript插件如何实现Tab选项卡效果

这篇文章将为大家详细讲解有关JavaScript插件如何实现Tab选项卡效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

公司主营业务:网站制作、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出安陆免费做网站回馈大家。

首先,来看看最终效果:

JavaScript插件如何实现Tab选项卡效果

这是一款普通的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




 
 Tab选项卡
 
 
 
 


 
 
  新闻 
  
  • 电影 
  •   
  • 娱乐 
  •   
  • 科技 
  •          

    新闻

      
         

    电影

      
         

    娱乐

      
         

    科技

            
    .tab {
     width: 300px;
    }
    
    .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;
    }

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

    /**
     * Created by Wu.lin on 2017/11/12.
     */
    (function($){
    
     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);

    关于“JavaScript插件如何实现Tab选项卡效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    网站名称:JavaScript插件如何实现Tab选项卡效果
    本文网址:http://cdxtjz.com/article/joissh.html

    其他资讯