How to realize tab Tab effect by js Development plug-in
Editor to share with you how the js development plug-in to achieve the tab tab effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
First, set up pages, news, entertainment, film science and technology
2. Basic style * {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 00;}. Tab. Tab-nav li a {display: block; text-decoration: none; height 30px Line-height: 30px; padding: 020px; 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;} III.
Fourth, the thought structure map of tab development: objects, parameters, and methods are required.
Js actual combat (function () {function Tab (tab) {this.tab = tab; var _ this_ = this) / / default configuration parameter, attribute name is double quotation marks, otherwise parseJSON escape is not successful this.config = {/ / is used to define the trigger type of the mouse, whether it is click or mouseover "triggerType": "mouseover", / / to define the content switching effect, or to switch directly. Or fade in and fade out effect "effect": "default", / / default shows the number of tab "invoke": 1, / / used to define whether the tab is automatically switched, and specify how long to switch "auto": false} / / if the configuration exists, extend the original configuration, $.extend merges if (this.getConfig ()) {$.extend (this.config, this.getConfig ()) } / / Mouse trigger function var config = this.config; / / Storage configuration. This.config will look up this.liItem = this.tab.find ('.tab-nav li') every time; / / get li this.contentItem = this.tab.find (' .content div'); / / get content / / judge if it is click. Execute the invoke method to switch if (config.triggerType = = 'click') {this.liItem.click (function () {_ this_.invoke ($(this));});} else {this.liItem.mouseover (function () {_ this_.invoke ($(this));});} / / automatic switching function if (this.config.auto) {this.timer = null; this.count = 0 / / counter this.autoplay (); / / when the mouse floats and stops, continue this.tab.hover (function () {clearInterval (_ this_.timer); / / this is this.tab}, function () {_ this_.autoplay ()) })} / / the if (this.config.invoke > 1) {this.invoke (this.liItem.eq (this.config.invoke-1)) is displayed by default; / / directly switch} Tab.prototype = {/ / get the configuration parameter getConfig: function () {/ / take out the contents of the data-config on the tab element var config = this.tab.attr ('data-config') If (config & & config! ='') {return $.parseJSON (config); / / convert json object to js object} else {return null;}}, / / get the incoming li, switch invoke: function (li) {var index = li.index (); / / get the index var liItem = this.liItem; var contentItem = this.contentItem of JSON Li.addClass ('active'). Siblings (). RemoveClass (' active'); / oneself plus active other brothers remove / / fade out or default var effect = this.config.effect; if (effect = 'default') {contentItem.eq (index) .addClass (' current'). Siblings (). RemoveClass ('active');} else {contentItem.eq (index). FadeIn (). Siblings (). FadeOut () } / / change count when switching automatically, otherwise start from scratch every time this.count = index;}, / / automatically switch autoplay: function () {var _ this_ = this; var length = this.liItem.length; / / get length this.timer = setInterval (function () {_ this_.count + +) / / add one to the count. The this is this.timer if (_ this_.count > = length) {_ this_.count = 0;} / / the first li trigger event _ this_.liItem.eq (_ this_.count). Trigger (_ this_.config.triggerType);}, this.config.auto);}} window.Tab = Tab / / register Tab as a window object, otherwise the outside cannot access} (); VI. Call / / pass the first tab to the Tab class var tab = new Tab ($('.tab'). Eq (0)). Optimization, when there are multiple tab, there is no need to new multiple
1. The first one is through init
/ / initialize Tab.init = function (tabs) {tabs.each (function () {new Tab ($(this));}) via init;}
Call
Tab.init ($('.tab'))
2. The second method by registering as jquery
/ register as jquery method $.fn.extend ({tab: function () {this.each (function ()) {/ / who called the tab method new Tab ($(this)); / / this this is an each li}); return this; / / chained operation}})
Call
$('.tab'). Tab (); this is all the content of the article "how to achieve tab tab effects in js development plug-ins". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
