js開發外掛實現tab選項卡效果
阿新 • • 發佈:2021-09-22
本文例項為大家分享了外掛實現tab選項卡效果的具體程式碼,供大家參考,具體內容如下
一、搭建頁面
<div class="tab" data-config='{ // 在標籤裡自定義配置 "triggerType": "click","effect": "fade","invoke": 2,"auto": 1000 }'> <ul clazxICwZEBsss="tab-nav"> <li class="active"><a href=":void(0);" >新聞</a></li> <li><a href="script:void(0);" >娛樂</a></li> <li><a href="javascript:void(0);" >電影</a></li> <li><a href="javascript:void(0);" >科技</a></li> </ul> <div class="content"> <div class="content-item current"> <img src="./images/pic1.jpg"> </div> <div class="content-item"> <img src="./images/pic2.jpg"> </div> <div class="content-item"> <img src="./images/pic3.jpg"> </div> <div class="content-item"> <img src="./images/pic4.jpg"> </diwww.cppcns.comv> </div> </div>
二、基礎樣式
* { margin: 0; padding: 0; } ul,li { list-style: none; } body { background: #323232; font-size: 12px; padding: 100px; } .tab { width: 300px; } .tab .tab-nav { height: 30px; } .tab .tab-nav li { display: inline-block; margin-right: 5px; background: #767676; border-radius: 3px 3px 0 0; } .tab .tab-nav li a { display: block; text-decoration: none; height: 30px; line-height: 30px; padding: 0 20px; color: #fff; } .tab .tab-nav li.active { background: #fff; color: #777; } .tab .tab-nav li.active a { color: #777; } .tab .content { background: #fff; height: 200px; padding: 5px; } .tab .content-item { position: absolute; display: none; } .tab .content img { width: 290px; height: 200px; } .tab .content .current { display: block; }
三、效果
四、選項卡開發的思維結構圖:需要物件、引數、和方法
五、js實戰
(function () { function Tab (tab) { this.tab = tab; var _this_ = this; // 預設配置引數,屬性名為雙引號,不然parseJSON轉義不成功 this.config = { // 用來定義滑鼠的觸發型別,是click還是mouseover "triggerType": "mouseover",// 用來定義內容切換效果,是直接切換,還是淡入淡出效果 "effect": "default",// 預設展示第幾個tab "invoke": 1,// 用來定義tab是否自動切換,指定時間為多久切換 "auto": false } // 如果配置存在,就擴充套件掉原來的配置,$.extend合併 if (this.getConfig()) { $.extend(this.config,this.getConfig()); } // 滑鼠觸發功能 var config = this.config; // 儲存配置,this.config會每次查詢 this.liItem = this.tab.find('.tab-nav li'); // 獲取li this.contentItem = this.tab.find('.content div'); // 獲取內容 // 判斷如果是click。。當www.cppcns.com操作時,執行invoke方法進行切換 if (config.triggerType === 'click') { this.liItem.click(function () { _this_.invoke($(this)); }); } else { this.liItem.mouseover(function () { _this_.invoke($(this)); }); } // 自動切換功能 if (this.config.auto) { this.timer = null; this.count = 0; // 計數器 this.autoplay(); // 當滑鼠浮在上面停止,移開時繼續 this.tab.hover(function () { clearInterval(_this_.timer); // 此時的this是this.tab },function () { _this_.autoplay(); }) } // 預設顯示第幾個 if (this.config.invoke > 1) { this.invoke(this.liItem.eq(this.config.invoke - 1)); // 直接切換 } } Tab.prototype = { // 獲取配置引數 getConfig: function () { //把tab元素上的data-config中的內容拿出來 var config = this.tab.attr('data-config'); if (config && config != '') { return $.parseJSON(config); // 將json物件轉換為js物件 } else { return null; } },// 獲取傳入的li,進行切換 invoke: function (li) { var index = li.index(); // 獲取li的索引 var liItem = this.liItem; var contentItem = this.contentItem; li.addClass('active').siblings().removeClass('active'); // 自身加active其他兄弟都去除 // 淡入淡出還是預設 var effect = this.config.effect; if (effect === 'default') { contentItem.eq(index).addClass('current').siblings().removeClass('active'); } else { contentItem.eq(index).fadeIn().siblings().fadeOut(); } // 當自動切換時,要更改count,否則每次都從頭開始 this.count = index; },// 自動切換 autoplay: function () { var _this_ = this; var length = this.liItem.length; // 獲取長度 this.timer = setInterval(function() { _this_.count ++; // 計數加一,此時的this是this.timer if (_this_.count >= length) { _this_.count = 0; } // 第幾個li觸發事件 _this_.liItem.eq(_this_.count).trigger(_this_.config.triggerType); },this.config.auto); } } window.Tab = Tab; // 將Tab註冊為window物件,不然外部無法訪問 })();
六、呼叫
// 將第一個tab傳給Tab類 var tab = new Tab($('.tab').eq(0));
七、優化,當有多個tab時,不用new多個
1、第一種通過init
// 通過init初始化 Tab.init = function (tabs) { tabs.each(function () { new Tab($(this)); }); }
呼叫
Tab.init($('.tab'));
2、第二種通過註冊為方法
// 註冊為jquery方法 $.fn.extend({ tab: function () { this.each(function () { // 這個this是誰呼叫的tab方法 new Tab($(this)); // 這個this是each過的li }); return this; // 鏈式操作 } })
呼叫
$('.tab').tab();
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。