
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
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.
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:
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:
Concentriamo la nostra attenzione sulle tab aggiugendo un maggior livello d’interazione per l’utente realizzando i tre stati principali:
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:
background-repeat
;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.
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.
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:
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.
Vediamo ora quali classi possiamo utilizzare per personalizzare gli stati di interazione delle tab:
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;
}
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.
Se vuoi aggiornamenti su Widget multifunzione con tab inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Tecnologie Web nell’era del mobile
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Panoramica generale sulle CSS Shapes , proprietà e tecniche di base per realizzare layout creativi in grado di avvicinare il Web alle potenzialità della carta stampata.
Gestire il modo in cui un elemento si fonde cromaticamente con gli elementi sottostanti. Simile ai Blend modes (opzioni di fusione) di Photoshop o Gimp
Introduzione sui font serif e il loro uso per il Web, in particolare per eBook, strumenti di lettura avanzata e design particolarmente creativi.
Bootstrap è uno dei framework CSS più utiizzati ed imitati, nato nel nido di Twitter ed oggi indipendente. Bootstrap può a buon diritto considerarsi lo standard de facto dei framework CSS per lo sviluppo di interfacce Web, trovando applicazione in ambiti come la creazione di template HTML preconfezionati ed i temi per i principali CMS, soprattutto in un’ottica responsiva.