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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab选项卡</title>
<link href="tab.css" rel="stylesheet">
<style>
* {
margin:0;
padding:0;
}
body {
background-color: #323232;
font-size:12px;
font-family:微软雅黑;
padding:100px;
}
ul, li {
list-style-type: none;
}
</style>
<script src="../lib/jquery-1.11.3.js"></script>
<script type="text/javascript" src="tab.js"></script>
</head>
<body>
<p class="js-tab tab">
<ul class="tab-nav">
<li class="active"><a href="#">新闻</a> </li>
<li><a href="#">电影</a> </li>
<li><a href="#">娱乐</a> </li>
<li><a href="#">科技</a> </li>
</ul>
<p class="content-wrap">
<p class="content-item current">
<h3>新闻</h3>
</p>
<p class="content-item">
<h3>电影</h3>
</p>
<p class="content-item">
<h3>娱乐</h3>
</p>
<p class="content-item">
<h3>科技</h3>
</p>
</p>
</p>
<script>
$(function() {
// Tab.init($(".js-tab"));
$(".js-tab").etab({
triggerType: "click",
effect: "fade",
invoke: 2,
auto: 3000
});
$(".js-tab").etab();
});
</script>
</body>
</html>.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("p.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选项卡详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
Win11管理员权限获取详解
Mar 08, 2024 pm 03:06 PM
Windows操作系统是全球最流行的操作系统之一，其新版本Win11备受瞩目。在Win11系统中，管理员权限的获取是一个重要的操作，管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限，以及如何有效地管理权限。在Win11系统中，管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限
Oracle SQL中的除法运算详解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法运算详解在OracleSQL中，除法运算是一种常见且重要的数学运算操作，用于计算两个数相除的结果。除法在数据库查询中经常用到，因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识，并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算
PHP模运算符的作用及用法详解
Mar 19, 2024 pm 04:33 PM
PHP中的模运算符（%）是用来获取两个数值相除的余数的。在本文中，我们将详细讨论模运算符的作用及用法，并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中，当我们将一个整数除以另一个整数时，会得到一个商和一个余数。例如，当我们将10除以3时，商为3，余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中，使用%符号来表示模
linux系统调用system()函数详解
Feb 22, 2024 pm 08:21 PM
Linux系统调用system()函数详解系统调用是Linux操作系统中非常重要的一部分，它提供了一种与系统内核进行交互的方式。其中，system()函数是一个常用的系统调用函数之一。本文将详细介绍system()函数的使用方法，并提供相应的代码示例。系统调用的基本概念系统调用是用户程序与操作系统内核交互的一种方式。用户程序通过调用系统调用函数来请求操作系统
Linux的curl命令详解
Feb 21, 2024 pm 10:33 PM
Linux的curl命令详解摘要：curl是一种强大的命令行工具，用于与服务器进行数据通信。本文将介绍curl命令的基本用法，并提供实际的代码示例，帮助读者更好地理解和应用该命令。一、curl是什么？curl是一个命令行工具，用于发送和接收各种网络请求。它支持多种协议，如HTTP、FTP、TELNET等，并提供了丰富的功能，如文件上传、文件下载、数据传输、代
详细解析C语言学习路线
Feb 18, 2024 am 10:38 AM
C语言作为一门广泛应用在软件开发领域的编程语言，是很多程序员初学者的首选。学习C语言不仅可以帮助我们建立编程的基础知识，还可以提升我们解决问题和思考的能力。本文将详细介绍一条C语言学习的路线图，帮助初学者更好地规划自己的学习进程。1.学习基本语法在开始学习C语言之前，我们首先需要了解C语言的基本语法规则。这包括变量和数据类型、运算符、控制语句（如if语句、
深入了解Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Promise.resolve()详解，需要具体代码示例Promise是JavaScript中一种用于处理异步操作的机制。在实际开发中，经常需要处理一些需要按顺序执行的异步任务，而Promise.resolve()方法就是用来返回一个已经Fulfilled状态的Promise对象。Promise.resolve()是Promise类的一个静态方法，它接受一个
