Unobtrusive Simple TabStrip

USimpleTabStrip Unobtrusive JavaScript is to improve the classic anchor links (yet) 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 has created a real class to manage the TabStrip. The release presented here is very simple and straightforward. His main work lies in adding a click event to the normal link anchor. CSS styles are also not presented, just to leave the maximum freedom of action, but you can get an effective TabStrip with a few extra lines of CSS code, see Adding CSS styles below.

HTML

The class USimpleTabStrip working on a simple HTML, the anchor sftuttando ( <a name></a> ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<! - Simple list of links on the page ->
< 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 >

<! - Blocks / tabs ->

"tbs1" >< / a > < a name = "tbs1"> </ a >
< div >
h1 > < h1 > Listing # 1 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs2" >< / a > < a name = "tbs2"> </ a >
< div >
h1 > < h1 > Listing # 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs3" >< / a > < a name = "tbs3"> </ a >
< div >
h1 > < h1 > Data # 3 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

funziona da contenitore. The tag div just below the anchor a work as a container.

The Class USimpleTabStrip

The instantiation USimpleTabStrip has no effect until you call the method Init() . In this example you can see the class in action, click on the link to activate the Init.

Initialization

1
2
3
4
5
6
7
8
9
10
11
/ / Upon completion of the document calls init ().
/ / Can be used any other method, as Event.observe (window, 'load', ...);
/ / Depending on the tools available in this case is
/ / Google API for loading of libraries
init ) ; google. setOnLoadCallback (init);
/ **
* When the page is loaded trigged
* /
function init () {
new USimpleTabStrip ( ) ; UTS USimpleTabStrip var = new ();
}

Methods

  • Init()
    Initializes the class and active on the TabStrip
  • showFirstTab()
    Makes all tabs except for the first
  • showTabs(v)
    ) tutti i Tabs Show ( true ) / hide ( false ) all Tabs
  • version()
    Show the version of the class

Event callbacks

You can hook events to show / hide tab, as in this example was used Scriptaculous to add a fade effect to display the Tab (click on the link SetEffects):

1
2
3
4
5
new USimpleTabStrip ( ) ; UTS USimpleTabStrip var = new ();
/ / Use Scriptaculous to see a Tab
function ( e ) { UTS. OnShow = function (e) {
( e ) ; new Effect. Appear (s);
}


Adding CSS styles

As mentioned at the beginning, with a few definitions of CSS styles you can make a real layout TabStrip . Here's how to edit the HTML code to associate CSS styles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"tabstrip_button" > < div class = "tabstrip_button">
< ul >
= "#tbs1" > Tab 1 < / a >< / li > < will > < a href = "# tbs1"> Tab 1 </ a > </ them >
= "#tbs2" > Tab 2 < / a >< / li > < will > < a href = "# tbs2"> Tab 2 </ a > </ them >
= "#tbs3" > Tab 3 < / a >< / li > < will > < a href = "# tbs3"> Tab 3 </ a > </ them >
</ ul >
</ div >

"tabstrip_boxes" > < div class = "tabstrip_boxes">
"tbs1" >< / a > < a name = "tbs1"> </ a >
"tabstrip" > < div class = "tab strip">
h1 > < h1 > # 1 Content </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >
....
</ div >

Simple CSS Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/ **
* Sample Layout Style for TabStrip
*
* @ Author Giovambattista Fazioli
* @ @ Email g.fazioli undolog.com
* @ Web http://www.undolog.com
*
* /

div. tabstrip_button {
300px ; width: 300px;
}

div. tabstrip_button to,
, div. tabstrip_button a: link,
{ div. tabstrip_button a: visited {
block ; display: block;
8px ; padding: 8px;
#aaa ; background: # aaa;
1px solid #666 ; border-right: 1px solid # 666;
1px solid #666 ; border-bottom: 1px solid # 666;
}

{ div. tabstrip_button a: hover {
#ddd ; background: # ddd;
}

div. tabstrip_button ul {
none ; list-style: none;
}

div. tabstrip_button li {
left ; float: left;
}

div. tabstrip_boxes {
block ; display: block;
both ; clear: both;
700px ; width: 700px;
500px ; height: 500px;
#aaa ; background: # aaa;
8px ; padding: 8px;
}

div. {tab strip
#fff ; background: # fff;
12px ; padding: 12px;
2px inset #eee ; border: 2px inset # eee;
}

Download

USimpleTabStrip is on Google Code, you can download the RAW here

One Response to "Unobtrusive Simple TabStrip"

  1. August 20, 2008 Simple Accordion with the class USimpleTabStrip | Undolog.com :

    [...] USimpleTabStrip class, presented in Unobtrusive Simple TabStrip, can also be used to create a simple menu Accordion.Utilizzando the effects of [...]

Leave a comment

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL


Stop SOPA