Unobtrusive Tabstrip
Sabato 28 Aprile, 2007Utilizzando Prototype.js e Scriptaculous ecco come realizzare delle simple-tabstrip per un sito Web. In questa versione il soggetto non è il Tabstrip ma il suo funzionamento. La caratteristica essenziale di questo script risiede nella semplicità d'uso e nella possibilità di mantenere accessibile una pagina anche quando Javascript è disabilitato. In pratica è possibile addirittura aggiungere questa tecnica a pagine già realizzate a patto che rispettino quel minimo di sintassi HTML esposta sotto.
Per mantenere l'accessibilità anche in caso di Javascript disabilitato partiamo quindi dal caso standard HTML, quando, cioè, si inseriscono degli anchor all'interno di una pagina, nel formato:
Il codice HTML sopra esposto funziona in quanto non fa assolutamente uso di Javascript! Passiamo ora al nostro codice Unobtrusive:
-
Event.observe(window, 'load', function() {
-
$$('a[href^=#]:not([href=#])').each( function(element) {
-
element.observe('click', function(event) {
-
$$('a[name])').each( function(element){element.next().style.display="none"})
-
var c = 'a[name="'+this.hash.substr(1)+'"]';
-
$$(c).each(function(element) { new Effect.Appear(element.next()) });
-
Event.stop(event); }.bindAsEventListener(element))
-
})
-
var i = 0;
-
$$('a[name])').each(function(element) { if(i>0) element.next().style.display="none"; else i++; }
-
);
-
}
-
);
Questo codice - posto nella nostra pagina - non solo trasforma la nostra lista puntata in un Tabstrip ma, grazie a Scriptaculous, aggiunge anche un simpatico effetto fade quando si passa da un link-tab all'altro.
corretto 
Napolux ha detto:
Sono pigrissimo, un esempio?
Unobtrusive Simple TabStrip | Undolog.com ha detto:
[...] 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 [...]