html选项卡插件,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

Tab选项卡

* {

margin:0;

padding:0;

}

body {

background-color: #323232;

font-size:12px;

font-family:微软雅黑;

padding:100px;

}

ul, li {

list-style-type: none;

}

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

新闻

电影

娱乐

科技

$(function() {

// Tab.init($(".js-tab"));

$(".js-tab").etab({

triggerType: "click",

effect: "fade",

invoke: 2,

auto: 3000

});

$(".js-tab").etab();

});

.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);

如此看来，是不是很简单，一起来动手试试吧！

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