Tutorials » Sviluppo » Javascript » Internet

Unobtrusive Simple TabStrip

giovedì 14 agosto, 2008

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>):

PLAIN TEXT
HTML:
  1. <!-- Semplice lista di link all'interno della pagina -->
  3.     <li><a href="#tbs1">Link 1</a></li>
  4.     <li><a href="#tbs2">Link 2</a></li>
  5.     <li><a href="#tbs3">Link 3</a></li>
  7.  
  8. <!-- Blocchi/tabs -->
  9.  
  10. <a name="tbs1"></a>
  11.     <div>
  12.         <h1>Scheda #1</h1>
  13.         <p>Bla bla bla....</p>
  14.     </div>
  15.  
  16. <a name="tbs2"></a>
  17.     <div>
  18.         <h1>Scheda #2</h1>
  19.         <p>Bla bla bla....</p>
  20.     </div>
  21.  
  22. <a name="tbs3"></a>
  23.     <div>
  24.         <h1>Scheda #3</h1>
  25.         <p>Bla bla bla....</p>
  26.     </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

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

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):

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


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:

PLAIN TEXT
HTML:
  1. <div class="tabstrip_button">
  2.     <ul>
  3.         <li><a href="#tbs1">Tab 1</a></li>
  4.         <li><a href="#tbs2">Tab 2</a></li>
  5.         <li><a href="#tbs3">Tab 3</a></li>
  6.     </ul>
  8.  
  9. <div class="tabstrip_boxes">
  10.     <a name="tbs1"></a>
  11.     <div class="tabstrip">
  12.         <h1>Content #1</h1>
  13.         <p>Bla bla bla....</p>
  14.     </div>
  15.     ....

Semplice stile CSS di esempio:

PLAIN TEXT
CSS:
  1. /**
  2.  * Sample Style for TabStrip Layout
  3.  *
  4.  * @author        Giovambattista Fazioli
  5.  * @email         g.fazioli@undolog.com
  6.  * @web           http://www.undolog.com
  7.  *
  8.  */
  9.  
  10. div.tabstrip_button {
  11.     width:300px;
  12. }
  13.  
  14. div.tabstrip_button a,
  15. div.tabstrip_button a:link,
  16. div.tabstrip_button a:visited {
  17.     display:block;
  18.     padding:8px;
  19.     background:#aaa;
  20.     border-right:1px solid #666;
  21.     border-bottom:1px solid #666;
  22. }
  23.  
  24. div.tabstrip_button a:hover {
  25.     background:#ddd;
  26. }
  27.  
  28. div.tabstrip_button ul {
  29.     list-style:none;
  30. }
  31.  
  32. div.tabstrip_button li {
  33.     float:left;
  34. }
  35.  
  36. div.tabstrip_boxes {
  37.     display:block;
  38.     clear:both;
  39.     width:700px;
  40.     height:500px;
  41.     background:#aaa;
  42.     padding:8px;
  43. }
  44.  
  45. div.tabstrip {
  46.     background:#fff;
  47.     padding:12px;
  48.     border:2px inset #eee;
  49. }

Download

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

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , ,

Un commento a: “Unobtrusive Simple TabStrip”

  1. getAvatar 1.0
    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
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL