Widget multifunzione con tab

Realizziamo un modulo a tab per organizzare contenuti di natura diversa in uno stesso spazio utilizzando tecniche utili: tab grafiche elastiche, jQuery e CSS override

In questo articolo realizzeremo un modulo, detto anche widget, che consente all’utente di visualizzare diversi tipi di contenuti (form, testo, immagini) in uno stesso spazio e che usa una navigazione tra questi contenuti mediante tab. Ecco subito l’esempio in azione.

Il widget utilizza una base HTML semantica, una parte CSS per la presentazione e per l’impostazione della grafica tramite sprites, una parte di interattività ottenuta con l’ausilio di jQuery UI.

Grafica

Progettiamo per prima cosa la grafica del modulo tenendo bene in considerazione il codice HTML/CSS che andremo a scrivere. In questo articolo prenderemo in esame una base già realizzata:

Figura 1 – Il widget da realizzare screenshot

La prima fase del lavoro consiste nel ritagliare le aree di interesse, importare le immagini nel template HTML e ricomporre infine la struttura.

Ecco le aree ti ritaglio che utilizzeremo per il nostro codice HTML:

Figura 2 – Aree di ritaglio screenshot

Concentriamo la nostra attenzione sulle tab aggiugendo un maggior livello d’interazione per l’utente realizzando i tre stati principali:

  • default: la tab non selezionata;
  • hover: l’aspetto della tab al passaggio del mouse;
  • active: l’aspetto della tab al click.
Figura 3 – Icone screenshot

Un’altra immagine è quella che raccoglie le icone delle tab. Analizziamo il motivo della scelta di preparare due immagini: una con le icone e una di sfondo per le tab:

  1. la tab si adatta alla lunghezza del testo, attraverso la proprietà background-repeat;
  2. avremo bisogno di un’immagine di background che si ripete lungo tutto la tab e di un’immagine fissa che è l’icona.

Attraverso la tecnica degli sprites CSS utilizziamo un unico file immagine per le icone, assegnando a ogni stato la porzione d’immagine corrispondente.

Nel paragrafo successivo vedremo l’HTML e il CSS necessari per riprodurre questi effetti d’interazione.

Codice

Il nostro obiettivo è quello di semplificare il codice sfruttando le proprietà dei tag HTML e utilizzando un css funzionale alle esigenze del layout:

<div id="tabs" class="widget">
    <ul>
        <!-- html delle tab - vedi sotto -->
    </ul>
    
    <div id="tabs-1">
        <!-- contenuto -->
    </div>


    <div id="tabs-2" style="display:none">
        <!-- contenuto -->
    </div>


    <div id="tabs-3" style="display:none">
        <!-- contenuto -->
    </div>
    
    <div class="widget-footer"></div>
</div>

La prima tab sarà univoca, in quanto incorpora il bordo del modulowidget. Ciò comporta la necessità di utilizzare una porzione di immagine di background diversa rispetto alle altre tab. Applichiamo quindi la classe first al primo <li>. Ecco il codice:

<ul>
  <li class="first"><a href="#tabs-1" class="tab1">Tab 1</a></li>
  <li><a href="#tabs-2" class="tab2">Tab 2</a></li>
  <li><a href="#tabs-3" class="tab3">Tab 3</a></li>
</ul>

Utilizziamo una lista di item, la scelta semanticamente più corretta: il tag <li> definisce la tab, mentre il tag <a> rende l’area cliccabile.

Il contenuto di ciascuna tab, che sia un form di ricerca, un testo di un articolo con titolo e immagini oppure una galleria fotografica, sarà organizzato in un numero di <div> pari al numero delle tab che si vogliono utilizzare.

Gli id dei vari <div> saranno l’ancora per i link delle tab.

Infine definiamo lo sfondo delle tab attraverso un’immagine unica comune a tutti:

.widget ul {
  margin: 0;
  padding: 0;
  background: url(widget-tab.gif) top left no-repeat;
  height: 44px;
  list-style: none;
}

La parte dei CSS relativa alle tab è da affrontare di pari passo all’implementazione di jQuery per le interazioni dinamiche.

Implementiamo jQuery UI

Grazie alla libreria jQuery UI è possibile aggiungere effetti d’interazione avanzati in modo semplice, personalizzando gli elementi secondo le nostre necessità.

Tra i diversi widget messi a disposizione sul sito troviamo quello che fa per noi: il widget Tabs. Non analizzeremo nel dettaglio il funzionamento del widget e del framework a livello di back-end. Piuttosto analizziamo come integrare questa funzionalità con il layout e la grafica da noi progettata.

Accediamo alla pagina di download dei componenti del framework e scarichiamo i componenti che ci interessano: UI Core e Widget Tabs. Selezioniamo “nessun tema” nella select Themes per facilitare la personalizzazione del widget:

Figura 4 – Scaricare il widget tabs semza tema screenshot

Markup con jQuery UI CSS Framework

Inseriamo nella <head> del nostro file HTML i collegamenti ai file di jQuery appena scaricati (vedi esempio) e analizziamo il codice generato dal framework Javascript:

<div class="widget ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="first ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1" class="tab1">Tab1</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#tabs-2" class="tab2">Tab2</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#tabs-3" class="tab3">Tab2</a></li>
  </ul>
  <div class="widget-content">
  <!-- WIDGET CONTENT TABS -->
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> Contenuto d'esempio primo tab. </div>
    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> Contenuto d'esempio secondo tab.</div>
    <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> Contenuto d'esempio terzo tab.</div>
  </div>
  <div class="widget-footer"/>
</div>

Risalta subito agli occhi il numero di classi generate da jQuery: vengono utilizzate dai temi messi a disposizione del framework. jQuery utilizza alcuni file CSS proprietari che sarà bene non modificare (ad esempio ui.theme.css e ui.core.css). Un aggiornamento a una nuova versione potrebbe infatti compromettere il layout e il funzionamento del widget.

Creiamo quindi un file CSS specifico per le regole che ci interessano. In questo modo agiamo sulle classi utilizzate dal framework senza compromettere la versione originale. Chiamiamo questo file widget.css.

Stati d’interazione

Vediamo ora quali classi possiamo utilizzare per personalizzare gli stati di interazione delle tab:

  • .ui-state-hover
  • .ui-tabs-selected

Le icone

Il codice CSS per gestire le icone nei tre stati:

/* ICONE - DEFAULT STATUS */
.widget ul li a.tab1 {
  background: url(tab-icons.gif) 0 -46px no-repeat;
}
.widget ul li a.tab2 {

  background: url(tab-icons.gif) 0 -184px no-repeat;
}
.widget ul li a.tab3 {
  background: url(tab-icons.gif) 0 -323px no-repeat;
}
/* ICONE - HOVER STATUS */
.widget ul li.ui-state-hover a.tab1 {
    background: url(tab-icons.gif) 0 -92px no-repeat;
}
.widget ul li.ui-state-hover a.tab2 {
    background: url(tab-icons.gif) 0 -230px no-repeat;
}
.widget ul li.ui-state-hover a.tab3 {
    background: url(tab-icons.gif) 0 -369px no-repeat;
}
/* ICONE - SELECTED STATUS */
.widget li.ui-tabs-selected a.tab1, .widget li.ui-tabs-selected.ui-state-hover a.tab1{
  background: url(tab-icons.gif) 0 0 no-repeat;
}
.widget li.ui-tabs-selected a.tab2, .widget li.ui-tabs-selected.ui-state-hover a.tab2{

  background: url(tab-icons.gif) 0 -138px no-repeat;

}
.widget li.ui-tabs-selected a.tab3, .widget li.ui-tabs-selected.ui-state-hover a.tab3{

  background: url(tab-icons.gif) 0 -277px no-repeat;

}

La tab

Definiamo infine lo status hover per il primo (classe .first) e poi per tutte le tab successive. Cambia il valore di background-position (-10px 0) per nascondere l’angolo arrotondato nelle tab successive alla prima.

/* TAB BG HOVER */
.widget ul li.first.ui-state-hover {
    background: url(widget-tab-hover.gif) 0 0 no-repeat;
}
.widget ul li.ui-state-hover {
    background: url(widget-tab-hover.gif) -10px 0 no-repeat;
}
/* TAB BG SELECTED */
.widget li.first.ui-tabs-selected , .widget li.first.ui-tabs-selected.ui-state-hover {
  background: url(widget-tab-sel.gif) top left no-repeat;
}
.widget li.ui-tabs-selected, .widget li.ui-tabs-selected.ui-state-hover  {
  background: url(widget-tab-sel.gif) -10px 0 repeat-x;
}

A differenza degli altri “stati”, per definire la tab selezionata jQuery utilizza una nomenclatura diversa: non .ui-state-nomestato bensì ui-tabs-nomestato.

Concateniamo le classi CSS per poter definire il comportamento dello stato hover su una tab già selezionata: .ui-tabs-selected.ui-state-hover> scritto tutto attaccato significa: applica le seguenti proprietà nello stato hover dell’elemento tabs-selected.. In questo modo “disattiviamo” l’effetto hover sulla tab già selezionata.

Vediamo dunque l’esempio completo del widget.

È anche disponibile un pacchetto zip con tutti i file.