Unobtrusive Simple TabStrip

USimpleTabStrip è un Unobtrusive Javascript in grado di migliorare i classici link anchor (ancora) all’interno di una pagina HTML. Questo sorgente è un miglioramento della funzione presentata in Unobtrusive Tabstrip. In questa versione oltre ad allineare il codice alle release 1.6 di prototype.js è stata creata una vera e propria classe per gestire i TabStrip. La release qui presentata è molto semplice e lineare. Il suo principale lavoro risiede nell’aggiungere un evento click ai normali link anchor. Non sono inoltre presentati stili CSS, proprio per lasciare la massima libertà d’azione; tuttavia è possibile ottenere un efficace TabStrip con poche righe di codice CSS aggiuntivo; vedi Aggiungere degli stili CSS più sotto.

Codice HTML

La classe USimpleTabStrip lavora su un HTML molto semplice, sftuttando gli anchor (<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
<!-- Semplice lista di link all'interno della pagina -->
<ul>
    <li><a href="#tbs1">Link 1</a></li>
    <li><a href="#tbs2">Link 2</a></li>
    <li><a href="#tbs3">Link 3</a></li>
</ul>

<!-- Blocchi/tabs -->

<a name="tbs1"></a>
    <div>
        <h1>Scheda #1</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs2"></a>
    <div>
        <h1>Scheda #2</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs3"></a>
    <div>
        <h1>Scheda #3</h1>
        <p>Bla bla bla....</p>
    </div>

Il tag div subito sotto l’anchor a funziona da contenitore.

La Classe USimpleTabStrip

La creazione dell’istanza USimpleTabStrip non produce nessun effetto sino a quando non si chiama il metodo Init(). In questo esempio è possibile vedere la classe in azione, per attivarla cliccare sul link Init.

Inizializzazione

1
2
3
4
5
6
7
8
9
10
11
    // Al completamento del documento chiama init().
    // Può essere usato qualsiasi altro metodo, come Event.observe(window, 'load', ... );
    // in dipendenza degli strumenti a disposizione; in questo caso si è
    // Google API per il caricamento delle librerie
    google.setOnLoadCallback( init );
    /**
     * Trigged when the page is loaded
     */
    function init(){
        var uts = new USimpleTabStrip();
    }

Metodi

  • Init()
    Inizializza la classe e attiva la funzione TabStrip
  • showFirstTab()
    Rende invisibili tutti i Tabs tranne il primo
  • showTabs(v)
    Mostra (true)/Nasconde (false) tutti i Tabs
  • version()
    Mostra la versione della classe

Callbacks event

È possibile agganciarsi agli eventi di mostra/nascondi Tab, come in questo esempio è stato usato Scriptaculous per aggiungere un effetto Fade al mostra del Tab (cliccare sul link SetEffects):

1
2
3
4
5
var uts = new USimpleTabStrip();
// usa Scriptaculous per visualizzare un Tab
uts.onShow = function(e) {
    new Effect.Appear(e);
}


Aggiungere degli stili CSS

Come detto all’inizio, con poche definizioni di stili CSS è possibile rendere un vero layout TabStrip. Ecco come modificare il codice HTML per associare gli stili CSS:

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

<div class="tabstrip_boxes">
    <a name="tbs1"></a>
    <div class="tabstrip">
        <h1>Content #1</h1>
        <p>Bla bla bla....</p>
    </div>
    ....
</div>

Semplice stile CSS di esempio:

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 Style for TabStrip Layout
 *
 * @author        Giovambattista Fazioli
 * @email         g.fazioli@undolog.com
 * @web           http://www.undolog.com
 *
 */
 
div.tabstrip_button {
    width:300px;
}

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

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

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

div.tabstrip_button li {
    float:left;
}

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

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

Download

USimpleTabStrip è presente su Google Code, puoi scaricare la versione RAW qui

Un commento a: “Unobtrusive Simple TabStrip”

  1. 20 ago, 2008 Simple Accordion con la classe USimpleTabStrip | Undolog.com:

    [...] classe USimpleTabStrip, presentata in Unobtrusive Simple TabStrip, può essere utilizzata anche per realizzare un semplice menu Accordion.Utilizzando gli effetti di [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<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