Step-by-Step Parsing JavaScript implementation tab tab Automatic switching function _javascript skills

In this paper, we share a tab function which can realize automatic switching, and give the realization process of it.

About the tab we will not be unfamiliar, the application is very frequent, usually the tabs are required to click or across to achieve switching.
The code example is as follows:

The code above implements our requirements, the following is an introduction to its implementation process.
(1) Simulation implementation of the ID selector in jquery, parameter is the element id attribute value

function $ (ID) {
return typeof id = = "string"? document.getElementById (ID): ID;
}

(2). function $$ (oparent, Elem) {
Return (Oparent | | document). getElementsByTagName (Elem);
This function implements a collection of objects after which you specify all the specific elements under the element.
(3). The function of this function is to store the elements of all the class attribute values under the Oparent element into an array of Sclass

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 encapsulation of the event handler function, which realizes the browser compatibility function.

. function Addevent (Oelm, strevent, fuc) {
 Addeventlistener?oelm.addeventlistener (strevent,fuc,false): Oelm.attachevent (' on ' +strevent,fuc);
}

(5). This method implements the basic initialization operation

function Tab () {this.initialize.apply (this, arguments);
}

(6). Implements the functionality of the merge object, such as the ability to merge attributes from Object A into object B

Object.extend = function (destination, source) {for
 (var property in source) {
  Destination[property] = Source[pro Perty];
 }
 return destination;
}

(7). Tab.prototype = {}, set the prototype object for the tab constructor.
(8). initialize:function (obj, dis, content, OnEnd, eq) {}, this method can perform some initialization operations. 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 an object direct quantity, which stores some related parameters, and the fifth parameter stipulates which tab is selected by default, which is a number.
(9). This.obj = $ (obj) to get the specified element object.
(a). This.olist = $$$ (this.obj, ' list ') [0], gets the title outer div element of the class attribute value of list.
(one). This.acont = $$$ (this.obj, content), gets a collection of tab content elements.
(a). This.oul = $$ (this.olist, ' ul ') [0], get the title UL element.
This.ali = This.oUl.children, gets all the child elements under the UL element.
(a). This.timer = null, used as the identifier for the timer function.
(a). eq? (This.aLi.length < EQ = 0:eq): eq = 0, if EQ is 0 then use 0, otherwise you will use the EQ Pass value, the EQ value is less than the array length, or the EQ value is set to 0.
(). This.oeve (onend), overriding default settings.
This.onEnd.method = ' mouseover '? This.method = "MouseOver": This.method = "Click" to determine whether the MouseOver event or the Click event.
(This.onEnd.autoplay = = ' Stop '? This.autoplay = "Stop": This.autoplay = "Play", the default is AutoPlay, otherwise it is not autoplay.
This.acont[eq].style.display = ' block ', the default content item is displayed.
This.ali[eq].classname = ' Hove ', set the Caption tab style.
(this.display). (dis), which registers the event handler function, and the parameter is a style class name.
This.autoplaytab (eq, dis) performs this function to ensure that tabs are automatically toggled 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 the OnEnd object is passed, it is merged into the default object, or a null object is merged

Object.extend (this.onend, OnEnd | | {})

(a). Display:function (dis) {}, which registers the event handler function, and the parameter is a style class name.
(a). var _this = This, assign this to variable _this, why do you do this later. (a). var index = Inow = 0 For some initialization operations.
(a). for (index=0;index<_this.ali.length;index++) {}, which registers the event handler function through a for loop traversal.
(28)

. (function () {var j = index;
 Addevent (_this.ali[j], _this.method,
 function () {
  _this.fnclick (J,dis);
  _this.autoplaytab (j, dis);
 })
()

Using an anonymous self-executing function is actually a closure.
The closure is used to isolate the index value inside the anonymous function and the external index value.
This is assigned to _this because the this in the event handler is an object instance that points to element Li, not to the tab () constructor.
Autoplaytab:function (inow, dis) {}, this function implements the automatic switching function, the first parameter stipulates the index position where the current tab toggles, the second parameter a style class name, or the style that sets the current state.
if (This.autoplay = = ' play ') {}, determines whether automatic switching is allowed.
(s). var _this = This, assign this to the variable _this, and the principle is the same as above.
(This.inow = Inow, for assignment operations.)
(a). This.obj.onmouseover = function () {
Clearinterval (_this.timer);
When the mouse is suspended when the timer function to stop the execution, in fact, is to stop automatic switching.

(34). When the mouse left, start automatically switch action

This.obj.onmouseout = function () {
 _this.timer = setinterval (playtab,5000);
}

(km). Clearinterval (_this.timer), stopping the execution of the previous timer function.
_this.timer = SetInterval (playtab,5000) to begin automatic switching.
(37).

function Playtab () {
 if (_this.inow = = _this.ali.length) _this.inow = 0;
 _this.fnclick (_this.inow, dis)
  _this.inow++

}

The automatic switching function is realized by constantly calling this function.
If the current index equals the number of LI elements, set it to 0, which means a new round of switching from scratch.
The corresponding method is then called, and the index value is added to itself.

(38) Implementation of the tab toggle display hidden and style settings effect

. 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 the entire content of this article, I hope to help you learn.