Using prototype.js and Scriptaculous here is how to make the simple-tab strip for a Web site In this version the subject is not the Tabstrip but its operation. The essential feature of this script lies in the simplicity of use and ability to maintain a page accessible even when JavaScript is disabled. In practice you can even add pages to this technique have already been completed which respect the minimum of HTML syntax shown below.
To maintain accessibility even when Javascript disabled HTML so let's start from the standard case, that is, when you insert the anchor within a page in the format:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < ul > = "#tbs1" > Link 1 < / a >< / li > < will > < a href = "# tbs1"> Link 1 </ a > </ them > = "#tbs2" > Link 2 < / a >< / li > < will > < a href = "# tbs2"> Link 2 </ a > </ them > = "#tbs3" > Link 3 < / a >< / li > < will > < a href = "# tbs3"> Link 3 </ a > </ them > </ ul > "tbs1" >< / a > < a name = "tbs1"> </ a > < div > p > < p > Content # 1 </ p > </ div > "tbs2" >< / a > < a name = "tbs2"> </ a > < div > p > < p > Content # 2 </ p > </ div > "tbs3" >< / a > < a name = "tbs3"> </ a > < div > p > < p > Content # 3 </ p > </ div > |
The above HTML code works as it does not absolutely make use of Javascript! Let us now turn to our code Unobtrusive:
1 2 3 4 5 6 7 8 9 10 11 12 13 | window , 'load' , function ( ) { Event. Observe (window, 'load', function () { ) . each ( function ( element ) { $ $ ('A [href ^=#]: not ([href =#])'). Each (function (element) { 'click' , function ( event ) { element. observe ('click', function (event) { ) . each ( function ( element ) { element. next ( ) . style . display = "none" } ) $ $ ('A [name])'). Each (function (element) {element. Next (). Style. Display = "none"}) 'a[name="' + this . hash . substr ( 1 ) + '"]' ; var c = 'a [name = "' + this. hashes. substr (1) + ''] '; . each ( function ( element ) { new Effect. Appear ( element. next ( ) ) } ) ; $ $ (C). Each (function (element) {new Effect. Appear (element. next ())}); event ) ; } . bindAsEventListener ( element ) ) Event. Stop (event);}. BindAsEventListener (element)) }) 0 ; var i = 0; ) . each ( function ( element ) { if ( i > 0 ) element. next ( ) . style . display = "none" ; else i ++; } $ $ ('A [name])'). Each (function (element) {if (i> 0) element. Next (). Style. Display = "none"; else i + +;} ); } ); |
This code - in our place - not only transforms our Tabstrip in a bulleted list, but thanks to Scriptaculous , it also adds a nice fade effect when switching from a link-tab to another.
Pigrissimo have an example?
[...] Within an HTML page. This source is an improvement of the function presented in Unobtrusive Tabstrip. In this version as well as align the Code with Release 1.6 of prototype.js was created [...]