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",
invoke: 2,
auto: 3000
});
3、Tab.it( $(".js-tab"));
<!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脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++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()函數的使用方法，並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統
js和vue的關係
Mar 11, 2024 pm 05:21 PM
js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。
Linux的curl指令詳解
Feb 21, 2024 pm 10:33 PM
Linux的curl命令詳解摘要：curl是一種強大的命令列工具，用於與伺服器進行資料通訊。本文將介紹curl指令的基本用法，並提供實際的程式碼範例，幫助讀者更好地理解和應用該指令。一、curl是什麼？ curl是命令列工具，用於發送和接收各種網路請求。它支援多種協議，如HTTP、FTP、TELNET等，並提供了豐富的功能，如檔案上傳、檔案下載、資料傳輸、代
深入了解Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Promise.resolve()詳解，需要具體程式碼範例Promise是JavaScript中一種用來處理非同步操作的機制。在實際開發中，常常需要處理一些需要依序執行的非同步任務，而Promise.resolve()方法就是用來傳回一個已經Fulfilled狀態的Promise物件。 Promise.resolve()是Promise類別的靜態方法，它接受一個
