Home > Developer > JavaScript
Step-by-Step parsing of JavaScript to achieve automatic switch of the tab, javascripttab
This article shares a tab function that enables automatic switch and describes its implementation process.
You will not be unfamiliar with the tabs, and the applications are very frequent. Generally, the option cards can be switched only when you click or click the tab.
The code example is as follows:
<Html>The above code implements our requirements. The following describes the implementation process.
(1) simulate the implementation of the id selector in jQuery. The parameter is the id attribute value of the element.Function $ (id ){
Return typeof id = "string "? Document. getElementById (id): id;
}(2). function $ (oParent, elem ){
Return (oParent | document). getElementsByTagName (elem );
}. This function is used to specify the object set of all specific elements under an element.
(3) This function saves all elements whose class attribute values are sClass under the oParent element to an array.function $$$(oParent, sClass){ var aElem = $$(oParent, '*'); var aClass = []; var index = 0; for(index=0;index<aElem.length;index++){ if(aElem[index].className == sClass){ aClass.push(aElem[index]); } } return aClass;}(4) The binding and encapsulation of event processing functions enable browser compatibility.
.function addEvent(oElm, strEvent, fuc) { addEventListener?oElm.addEventListener(strEvent,fuc,false) : oElm.attachEvent('on'+strEvent,fuc);}(5) This method implements basic initialization operations.
function Tab(){ this.initialize.apply(this, arguments);}(6). The object merging function is implemented. For example, the attributes in object a can be merged into object B.
Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination;}(7). Tab. prototype = {}, and set the prototype object of the Tab constructor.
(8). initialize: function (obj, dis, content, onEnd, eq) {}. This method can be used for initialization. The first parameter is the element id attribute value, the second parameter is the class style class, the third parameter is the class Style class Name of the content div, and the fourth parameter is the direct quantity of an object, some related parameters are stored. The fifth parameter specifies which tab is selected by default and is a number.
(9). this. obj = $ (obj) to obtain the specified Element Object.
(10). this. oList =$ $ (this. obj, 'LIST') [0] to obtain the outer div element of the title whose class attribute value is list.
(11). this. aCont =$ $ (this. obj, content) to obtain a set of tab content elements.
(12). this. oUl =$ $ (this. oList, 'ul ') [0] to obtain the title ul element.
(13). this. aLi = this. oUl. children, get all child elements under ul.
(14). this. timer = null, used as the identifier of the timer function.
(15). eq? (This. aLi. length <eq? Eq = 0: eq): eq = 0. If eq is 0, 0 is used. Otherwise, the value passed by eq is used. The eq value is smaller than the array length, otherwise, the eq value is set to 0.
(16). this. oEve (onEnd), overwrite the default settings.
(17). this. onEnd. method = 'mouseover '? This. method = "mouseover": this. method = "click" to determine whether it is a mouseover event or a click event.
(18). this. onEnd. autoplay = 'stop '? This. autoplay = "stop": this. autoplay = "play", which is automatically played by default. Otherwise, it is not automatically played.
(19). this. aCont [eq]. style. display = 'block'. The default content item is displayed.
(20). this. aLi [eq]. className = 'hove', set the corresponding title tab style.
(21). this. display (dis), registers the event handler function. The parameter is a style class name.
(22). this. autoPlayTab (eq, dis). Execute this function to ensure that tabs can be automatically switched when automatic switching is allowed.
(23 ).Used for object Merging
oEve: function(onEnd){ this.onEnd = { method: 'mouseover', autoplay: 'stop', }; Object.extend(this.onEnd, onEnd || {});}This is the default setting.
this.onEnd = { method: 'mouseover', autoplay: 'stop',}If an onend object is passed, it is merged to the default object. Otherwise, an empty object is merged.
Object.extend(this.onEnd, onEnd || {})(24). display: function (dis) {}, registers the event handler function. The parameter is a style class name.
(25). var _ this = this: assign this value to the variable _ this. Why is this described later. (26). var index = iNow = 0 and perform some initialization operations.
(27). for (index = 0; index <_ this. aLi. length; index ++) {}, register the Event Handler through the for loop Traversal method.
(28).(function(){ var j = index; addEvent(_this.aLi[j], _this.method, function() { _this.fnClick(j,dis); _this.autoPlayTab(j, dis); })})()The use of anonymous self-executed functions actually forms a closure.
The closure is used to isolate the index value inside the anonymous function from the external index value.
The reason why this is assigned to _ this is that this in the event processing function points to the element li, rather than to the object instance of the Tab () constructor.
(29 ). autoPlayTab: function (iNow, dis) {}. This function enables automatic switching. The first parameter specifies the index location for the current tab switch, and the second parameter indicates the style class name, is to set the current style.
(30). if (this. autoplay = 'play') {}, determine whether automatic switch is allowed.
(31). var _ this = this: assign this to the variable _ this. The principle is the same as above.
(32). this. iNow = iNow to assign values.
(33). this. obj. onmouseover = function (){
ClearInterval (_ this. timer );
}, When the mouse is suspended, the timer function is stopped, that is, the automatic switch is stopped.(34) when the mouse leaves, the automatic switch starts.
this.obj.onmouseout = function(){ _this.timer = setInterval(playTab,5000);}(35). clearInterval (_ this. timer) to stop the previous timer function execution.
(36). _ this. timer = setInterval (playTab, 5000.
(37 ).function playTab(){ if(_this.iNow == _this.aLi.length)_this.iNow = 0; _this.fnClick(_this.iNow, dis) _this.iNow++}By constantly calling this function, the automatic switching function is realized.
If the current index is equal to the number of li elements, set it to 0, that is, a new round of switching from the beginning.
Then, call the corresponding method and auto-increment the index value.(38) display hiding and style setting effects are achieved during Tab switching
.fnClick : function(oBtn, dis){ var index = 0; for(index=0;index<this.aLi.length;index++){ this.aLi[index].className = ''; this.aCont[index].style.display = 'none'; } this.aLi[oBtn].className = dis; this.aCont[oBtn].style.display = 'block'; }The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
