Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des JavaScript-Plug-Ins Tab
Dieser Artikel stellt hauptsächlich den JavaScript-Plug-in-Tab-Effekt im Detail vor. Er hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen.
Ich habe nichts zu tun, also habe ich gelernt, wie man JavaScript-Plug-Ins schreibt, und heute werde ich ein kleines Plug-In aufzeichnen, das ich geschrieben habe.
In diesem Artikel werden die grundlegende Verwendung, die implementierten Funktionen und der Code dieses Plug-Ins vorgestellt.
Werfen wir zunächst einen Blick auf den endgültigen Effekt:
Dies ist ein gewöhnliches Tab-Plug-in. Lassen Sie uns weiter unten über seine Implementierung sprechen . Welche Funktionen:
1. Unterstützen Sie verschiedene Mausereignisse, um Tab-Umschalteffekte auszulösen.
3 . Unterstützt die Standard-Anzeigenummernkonfiguration von Tabs;
4.
1. Grundkenntnisse in HTML und CSS
2.
2 ") .etab({
triggerType: "click",
effect: "fade",
invoke: 2,
auto: 3000
});
3. Tab. init( $(".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; }Abschließend wird der Plug-in-Code aufgelistet und es wurden sehr detaillierte Kommentare in geschrieben Code:
/** * 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);Es scheint, dass es sehr einfach ist, lass es uns gemeinsam versuchen! Verwandte Empfehlungen:
jquery implementiert den Tab-Wechseleffekt
Mitteilung über den Tab-Tab-Effekt des JavaScript-Plug-ins
JS-Beispielcode zur Implementierung des Tab-Wechseleffekts
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JavaScript-Plug-Ins Tab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!