Blog e News:

Sab 18, ottobre 2008

Cambiare il layout delle TabView YUI by Danilo Bonardi

Come in un precendente articolo sulle dialog YUI torno a scrivere sulla customizzazione dei componenti di questo vasto framework javascript, per trattare questa volta delle tabView.

Le tabView sono un componente utilissimo per salvare lo spazio della pagina e strutturare le informazioni in modo chiaro e usabile. Anologamente a quanto visto per le dialog descriverò come redefinire le classi CSS di YUI per manipolare il layout delle tabView.

Ci sono vari modi possibili di utilizzare le tabView, in questo articolo utilizzo una tabview da markup come da esempio sulla guida ufficiale.

    <script type="text/javascript">
       YAHOO.util.Event.onDOMReady(demoDialog);
    </script>
    <a href="javascript:null(0)" id="showDemoDialog"></a>

    <div id="demoDialog" class="demoDialog" >
	    <div class="hd">Welcome!</div>
	    <div class="bd">
            <h3>Welcome</h3>
	    </div>
       	<div class="ft">
            <b>by Shiny Frog</b>
        </div>
    </div>

Come primo passo tolgo alla tabview tutto quello che YUI aggiunge, creando delle tab prive di ogni grafica. le ultime due classi servono per gestire la linea blu tra i selettori delle tab e il contenuto, questa linea è il bordo inferiore del div che contiene tutte le tab. Da notare anche che la gestione della tab selezionata viene fatta tramite la classe CSS .selected .

.yui-skin-sam .yui-navset .yui-content { 
    background-image: none;
    background-color: transparent;
}

.yui-skin-sam .yui-navset .yui-nav a,
.yui-skin-sam .yui-navset .yui-nav a:hover,
.yui-skin-sam .yui-navset .yui-nav a:focus {
    background-image: none;
    background-color: transparent;
}

.yui-skin-sam .yui-navset .yui-nav .selected a,
.yui-skin-sam .yui-navset .yui-nav .selected a:focus,
.yui-skin-sam .yui-navset .yui-nav .selected a:hover {
    background-image: none;
    background-color: transparent;
}

.yui-skin-sam .yui-navset .yui-navset .yui-nav,
.yui-skin-sam .yui-navset .yui-nav {
    border-color: transparent;
}

Partendo da questa base è molto semplice decorare a piacimento le tab e il loro contenuto. Qui potete vedere l'esempio finito.

.yui-skin-sam .yui-navset .yui-content { 
    background-image: none;
    background-color: #c2d6f3;
    font-style: italic;
    font-variant: small-caps;
}

.yui-skin-sam .yui-navset .yui-nav a,
.yui-skin-sam .yui-navset .yui-nav a:hover,
.yui-skin-sam .yui-navset .yui-nav a:focus {
    background-color: transparent;
    background: url("images/tab.png");
}

.yui-skin-sam .yui-navset .yui-nav .selected a,
.yui-skin-sam .yui-navset .yui-nav .selected a:focus,
.yui-skin-sam .yui-navset .yui-nav .selected a:hover {
    background-color: transparent;
    background: url("images/seltab.png");
}

.yui-skin-sam .yui-navset .yui-navset .yui-nav,
.yui-skin-sam .yui-navset .yui-nav {
    border-color: #162944;
}

Share Your Thoughts

Comments rules:

If possible please stick to English language
We support Gravatar, go for it!
Use BBCode for formatting: [b], [u], [s]
Use [i] for quoting
Use [link www.site.com] site [/link] for links
Use [google] or [wiki] for referencies
HTML code is not allowed in comments

Blog e News:

Cambiare il layout delle TabView YUI by Danilo Bonardi

Comments rules:

Archivio: