Release of the Tab switching class lix tabs 0.1

ArticleDirectory

• Functions and examples:
• Source code of lix tabs:
• Lix tabs description:
• Advantages and disadvantages of lix tabs:

In this website that is being developed recently, some pages will have several tab switches at the same time. Before writing this class, I have to copy the tab function every time I encounter one more tab. The key is that this function is actually similar to the previous ones. But it cannot be copied, because the tab function cannot be reused. Every time I do this, it makes me miserable.

After visiting the Javascript instances of several cool people in the blog Park, I began to think about writing such a class. Can this be called a class? I'm not sure, but I can use it. It took more than two weeks to modify the modification and found that there was no bug. So I published the modification and dared to add my own code. By the way, let's release the source code for reference by new users. If you read it, don't approve me. I am a newbie.

Functions and examples:

You can switch n tabs on the same page (n> 0). For more information, see the entire tab menu on the Netease homepage or click to view the example Page.

Source code of lix tabs:

VaR $ id = function (ID) {return (typeof id = "object ")? ID: document. getelementbyid (ID) ;}; var $ = function (TAG, elm) {return Elm. getelementsbytagname (TAG) ;}; var $ c = function (CN, Tag, elm) {If (! Tag) Tag = '*'; var ts =$ $ (TAG, elm); var classarr = []; var filter = new Regexp ("(^ | \ s) "+ CN +" (\ s | $) "); For (VAR I = 0, L = ts. length; I <L; I ++) {If (filter. test (TS [I]. classname) {classarr. push (TS [I]);} return classarr;} var cutover = function (ARR, cur, C1, C0) {for (VAR I = 0, L = arr. length; I <L; I ++) {arr [I]. classname = (I = cur )? C1: C0 ;}}var tabs = function (ELM) {If (ELM = NULL) {return false;} var T = this; /* Start caching input parameters */t. hdtag = arguments [1]. hdtag | T. items. hdtag; T. hdcn = arguments [1]. hdcn | T. items. hdcn; T. hdtagcur = arguments [1]. hdtagcur | T. items. hdtagcur; T. hdtagno = arguments [1]. hdtagno | T. items. hdtagno; T. bdtag = arguments [1]. bdtag | T. items. bdtag; T. bdcn = arguments [1]. bdcn | T. items. bdcn; T. bdtagcur = arguments [1]. bdtagcu R | T. items. bdtagcur; T. bdtagno = arguments [1]. bdtagno | T. items. bdtagno;/* cache parameter completed */t. tabhd = $ C (t. hdcn, T. hdtag, elm) [0]; T. tabtag = T. tabhd. children; T. tabbd = $ C (t. bdcn, T. bdtag, elm) [0]; T. tabcon = T. tabbd. children; T. now = 0; T. time = arguments [1]. auto; T. sum = T. tabtag. length; If (T. sum! = T. tabcon. length) {alert ('the number of tabs does not match the number of content'); Return true;} (function () {for (VAR I = 0; I <t. SUM; I ++) {T. tabtag [I]. to = I; T. tabtag [I]. onmouseover = function () {T. now = This. to; T. change () ;}}) (); If (T. time) {function go () {T. change (); T. now = (T. now = T. sum-1 )? 0: T. now + 1; T. run = setTimeout (arguments. callee, T. time) ;}; go (); Elm. onmouseover = function () {cleartimeout (T. run);} Elm. onmouseout = function () {T. run = setTimeout (go, T. time) ;}} tabs. prototype = {items: {hdtag: 'div ', hdcn: 'tabhd', hdtagcur: 'cur', hdtagno: '', bdtag: 'div', bdcn: 'tabbd ', bdtagcur: 'cur', bdtagno: ''}, change: function () {cutover (this. tabtag, this. now, this. hdtagcur, this. hdtagno); cutover (this. tabcon, this. now, this. bdtagcur, this. bdtagno );}};

Lix tabs description:

1. Basic instructions:

The default parameters are as follows:

 
Items: {hdtag: 'div ', // The tag hdcn: 'tabhd' In the tab header, // classname hdtagcur: 'cur' In the tab header ', // The classname hdtagno: ''of the current label in the tab header, // The classname bdtag: 'div 'of the non-current label in the tab header, // The label bdcn In the tab content area: 'tabbd ', // The classname bdtagcur: 'cur' In the tab content area, // The classname bdtagno of the current label in the tab content area: ''// classname of the non-current tag in the tab content area}
 

Dizzy? Instance comparison:

<Div class = "inner" id = "tablite"> <Div class = "tabhd"> <a class = "cur" Title = "" href = "#"> City Index </a> <a Title = "" href = "#" class = ""> brand name index </a> <a Title = "" href = "#" class =" "> online department stores </a> </div> <Div class =" tabbd "> <Div class =" cur "> <ul> <li> · <a Title =" "href =" # "> 0 Shanghai fire building project multi-sass auxiliary card </a> </LI> <li> · <a Title =" "href =" # "> loss up to 0.5 billion loyal dogs cannot eat and quickly expand liberation </a> </LI> </ul> </div> <Div class = ""> <ul> <li> · <a Title = "" href = "#"> 1 There are many projects in the fire tower in Shanghai </a> </LI> <li> · <a Title = "" href = "# "> losses amounted to 0.5 billion loyal dogs not to eat </a> </LI> </ul> </div> <Div class =" "> <ul> <li> · <A title = "" href = "#"> 2 There are many fire building projects in Shanghai </a> </LI> <li> · <a Title = "" href = "#"> losses amounted to 0.5 billion loyal dogs not to eat </a> </LI> </ul> </div>
 

2. User Guide:

Lix tabs has three important external functions:$ ID=> Getelementbyid,$=> Getelementsbytagname,$ C=> Getelementsbyclassname... For details, see the source code.

There is a required parameter, that is, which HTML object needs to be switched (note:Parameters are HTML objects rather than strings.!)

Call:

Default Value: var T1 = new tabs ($ ID ('t1 ')); (The underlined position is an HTML element obtained through $ id)

Autobiography parameters:

 
VaR T1 = new tabs ($ ID ('blog '), {hdcn: 'tab-HD', hdtagcur: 'tab-u current', hdtagno: 'tab-U ', bdcn: 'tab-BD ', bdtagcur: 'stream', bdtagno: 'tab-con', AUTO: 4000 });
 

Note:AutoThe value is the automatic switch interval. If you do not want to switch automatically, do not pass auto.

If there are too many tabs, it would be too much trouble to create a new one like above. You can alsoBatch DefinitionTo add a common class to all tabs:

/* Batch define */
VaR as = $ C ('as', 'div ', document); For (VAR I = 0, L =. length; I <L; I ++) {as [I]. tab = new tabs (as [I], {hdtag: 'ul ', hdcn: 'sn', hdtagcur: 'Now ', bdcn: 'imgs', bdtagcur: 'cur', AUTO: 2000 });}
 

Note: Batch definition is suitable for scenarios where multiple tab structures and even CSS of Netease homepage are the same.

Fault tolerance capability:

Tabs ignores the error and does not affect subsequent calls because it fails to find the HTML object due to the most common error-the error tolerance feature of tabs (ELM.

Advantages and disadvantages of lix tabs:

Advantages:CodeLess, about 2.3 K of pure code; can be applied in batches; can be set whether to automatically switch; automatically identify the number of tab labels... seems to be gone

Disadvantages: Switching without transition effects is not dazzling at all; there may be no efficiency problems found at the moment; maybeSource codeNot optimized enough; there may be a lot of parameters...

Known issues: children is used instead of childnodes to obtain the tab element, so it does not comply with W3C standards... Users with W3C obsessive-compulsive disorder should use it with caution.

Download complete instance: Click to download

Lix tabs Latest Version: Click to View Details 0.2

----------------------------------------------------------------------------------

Conclusion: lix tabs is a JS class with very simple functions, so it should be streamlined as much as possible. this release is version 0.1. If my Js level improves in the future, it will certainly improve + optimization, but it should not add transition special effects...

The following content can be ignored:

A few sighs, my Js level is really poor, not to mention anything else, I can only hardly understand JS articles in the blog Park; JS is really a little difficult; I really want to learn from experts face to face; finally, it's not easy to be alive. I have to pay less than 3000 yuan and raise my wife.