Linguette animate sexy che utilizzano MooTools

Un modo moderno e attraente di mettere un sacco di contenuti in un piccolo spazio è usando un sistema di tabulazioni. Questo tutorial ti mostrerà come creare un sistema di schede animate sexy completo di sprite CSS, cookie e scambio di tabulazioni animate.

ipotesi

Ci sono alcune ipotesi e note che stiamo entrando in questo sistema con:

Useremo la versione più recente di MooTools: 1.2.4.
Il client deve supportare JavaScript.
Useremo PHP per qualsiasi script sul lato server. Qualsiasi linguaggio sul lato server di tua scelta funzionerà anche con i suoi metodi / sintassi corrispondenti

Il tutorial presuppone anche una conoscenza di base di javascript. Un piccolo frammento di MooTools o esperienza framework JavaScript ti sarà d'aiuto.

La trama

Quindi come funzionerà questo fantastico sistema? Ecco la struttura di base:

Quando la pagina viene caricata, vengono generate due liste UL con le voci di elenco: il primo elenco contiene le schede, il secondo elenco contiene gli elementi di contenuto della scheda.
Per ogni set di schede che produciamo, controlliamo un determinato cookie che potrebbe dirci quale scheda deve essere visualizzata in base alla visita precedente. Se non è presente alcun cookie, assumiamo la prima scheda.
Quando l'utente fa clic su una scheda, l'elemento di contenuto corrente per quella scheda scorre fuori dalla vista e il nuovo contenuto della scheda viene inserito.
Salviamo l'indice della scheda in un cookie per futuri scopi di caricamento (cioè vogliamo che l'ultima scheda cliccata sia la prima a essere visualizzata nella pagina successiva / visita).

Il sistema stesso è piuttosto a prova di proiettile. Se l'utente non consente i cookie, la scheda iniziale per ogni elenco sarà sempre 0.
Se il supporto JavaScript non è presente, le schede non verranno visualizzate sullo schermo come mostreremo: nessuna; inizialmente.

Primo passo: l'HTML

L'HTML per realizzare il sistema di schede e gli elementi di contenuto corrispondenti è incredibilmente semplice nella struttura.

   Scheda 1
 Scheda 2
 Scheda 3
 Scheda 4
 
 
  Questo è il contenuto della scheda 1.
 Questo è il contenuto per la scheda 2.
 Questo è il contenuto per la scheda 3.
 Questo è il contenuto per la scheda 4.

Modificheremo il suddetto HTML con PHP più avanti in questo tutorial per creare un sistema più robusto.

Secondo passo: CSS

Come con qualsiasi combinazione di CSS e HTML, puoi modificare le schede e i relativi elementi di contenuto come preferisci.
Ho scelto di utilizzare gli sprite CSS in stile Facebook per le mie schede di esempio.
Renditi conto che vorrai modellare i seguenti elementi in modo specifico in modo che il sistema funzioni:

Gli elementi di contenuto della scheda devono avere un'altezza pari a 0 e il loro overflow nascosto. Ciò consente a tutti gli elementi di contenuto di essere "nascosti", per così dire, quando la pagina viene caricata.
Tra i selettori CSS "ul.tabs li a" e "ul.tabs li a.active", ti consigliamo di assegnare al selettore "attivo" un aspetto diverso in modo che l'utente ne conosca la "scheda attualmente selezionata".

 / * tabs structure * / .tab-container width: 320px; sfondo: #eee; imbottitura: 5px 10px;  ul.tabs list-style-type: none; margin: 0; padding: 0;  ul.tabs li float: left; margine: 10px 5px 0 0;  ul.tabs li a padding: 5px 10px; border: 1px solid #ddd; font-weight: bold; background: url (tab-sprite.jpg) 0 0 repeat-x; color: # 000; text-decoration: none;  ul.tabs li a.active border-color: # 028433; posizione di sfondo: 0 -96px; color: #fff;  / * sprite! posizione di sfondo swap * / ul.tabs li a.active:hover text-decoration: none; cursore: predefinito;  ul.tabs li: hover text-decoration: underline;  ul.tabs-content margin: 10px 0 0 0; padding: 0;  ul.tabs-content li height: 0; overflow: hidden; margin: 0; padding: 0;  / * cancella floats * / div.clear clear: both;  / * ie correzioni * / * html ul.tabs-content li float: left;  / * ie6 * / * + html ul.tabs-content li width: 99%; float: sinistra;  / * ie7 * /

Si noti che è necessario implementare alcune correzioni specifiche di Internet Explorer; brutto, ma necessario.

Terzo passaggio: il MooTools Javascript

Uno dei grandi vantaggi di MooTools è il potente sistema Class.
Le classi di MooTools consentono funzionalità flessibili, organizzate ed estendibili.
La nostra classe MooTools si chiamerà "TabSet". Poiché la classe TabSet esegue molte azioni,
consente di analizzare ogni parte della classe.

La prima riga dà sempre un nome alla classe:

 / * assegna un nome alla classe * / var TabSet = new Class (

Quindi dobbiamo creare un oggetto che possa contenere le opzioni della nostra classe:

 opzioni: // opzioni tab predefinite activeClass: 'active', // css class cookieName: ", // nessun nome significa nessun cookie cookieOptions: // opzioni per il cookie, se la durata desiderata del cookie: 30, // 30 giorni percorso: '/', startIndex: 0 // inizia con questo elemento se nessun cookie o attivo,

Le nostre opzioni ci permettono di definire:

activeClass: la classe CSS che deve essere assegnata alla scheda attualmente selezionata (o "attiva").
cookieName: il nome del cookie che rappresenterà questo set di schede. Se non si definisce un nome di cookie, i cookie non verranno utilizzati.
cookieOptions: un oggetto che contiene le opzioni per il cookie.
startIndex: la scheda da rendere attiva inizialmente. Inizia con 0. Sovrascritto dalla variabile activeClass se viene trovato un cookie.

Con solo tre opzioni nella classe, TabSet sarebbe considerato una classe relativamente semplice.

Successivamente implementiamo due opzioni ed eventi:

 Strumenti: [Opzioni, Eventi],

L'implementazione di opzioni ed eventi ci consentirà di gestire correttamente determinate opzioni e
licenzia gli eventi Load e Change personalizzati sui nostri elenchi ovunque all'interno della classe.

Successivamente definiamo il metodo "initialize" che viene eseguito alla creazione di ogni istanza della classe:

 initialize: function (tabs, contents, options) // gestisce gli argomenti this.setOptions (options); // mescola le opzioni date con le opzioni predefinite this.tabs = $$ (tabs); // salva le schede specificate all'interno della classe this.contents = $$ (contents); // salva il dato "contenuto" all'interno della classe // determina la scheda "attiva" var active = (Cookie.read (this.options.cookieName) || this.options.startIndex); // decide l'indice che dovrebbe essere inizialmente attivo this.activeTab = this.tabs [active] .addClass (this.options.activeClass); // ora identifica la scheda "attiva" this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // identifica il contenuto "attivo" // esegue ogni combinazione di schede / contenuto tramite il metodo "processItem" che vedremo sotto this.tabs.each (function (tab, i) this.processItem (tab, this.contents [i], i);, questo); // le schede sono pronte: attiva l'evento di caricamento! this.fireEvent ( 'load'); ,

Poi arriva il metodo workhorse della nostra classe TabSet: processItem:

 processItem: function (tab, content, i) var contentHeight = content.getScrollSize (). y; // aggiungi un evento click alla scheda tab.addEvent ('click', function () // se non è la scheda attiva if (tab! = this.activeTab) // stopper if (e) e.stop ( // rimuovere la classe attiva dalla scheda attiva this.activeTab.removeClass (this.options.activeClass); // rendere la scheda cliccata la scheda attiva (this.activeTab = scheda) .addClass (this.options.activeClass) ; // tween il vecchio contenuto della scheda su // tra il nuovo contenuto verso il basso this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('interpolazione ', onComplete: $ empty). tween (' height ', contentHeight); // attiva l'evento di modifica delle schede this.fireEvent (' change ', [tab, content]); .bind (this)). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // salva l'indice nel cookie if (this.options.cookieName) Cookie.write ( this.options.cookieName, i); .bind (this)); );

Ecco la struttura di base di ciò che fa il metodo processItem:

Accetta una scheda di corrispondenza, elemento di contenuto e il suo indice ...
Calcola l'altezza dell'elemento di contenuto.
Aggiunge un evento click alla scheda che:
1. Convalida che questa scheda non è già attiva (non vogliamo animare o modificare nulla se fanno clic sulla scheda già attiva)
2. Rimuove la classe CSS "attiva" dalla scheda corrente e la aggiunge alla scheda che è stata appena cliccata.
3. Fa scorrere i contenuti della scheda corrente fuori dalla visualizzazione, quindi fa scorrere il nuovo contenuto in visualizzazione. L'evento "change" viene attivato quando l'animazione è completa.
4. Salva l'indice della nuova scheda sul cookie in modo che quando l'utente ricarica la pagina o passi a un'altra pagina, la nuova scheda verrà inizialmente selezionata.

E ora un esempio di utilizzo della nostra classe:

 window.addEvent ('domready', function () var tabset = new TabSet ($$ ('# tabs1 li a'), $$ ('# contents1 li'), cookieName: 'demo-list'); );

Forniamo alla nostra istanza la scheda LI A e il contenuto LI's. Forniamo anche l'argomento delle opzioni opzionali. È così facile usare questa lezione! Ecco la lezione completa con l'utilizzo:

 / * class * / var TabSet = new Class (opzioni: activeClass: 'active', // css class cookieName: ", cookieOptions: durata: 30, // 30 giorni percorso: '/', startIndex: 0 // inizia con questo elemento se nessun cookie o attivo, Implementa: [Opzioni, Eventi], inizializza: funzione (schede, contenuto, opzioni) // gestisce gli argomenti this.setOptions (opzioni); this.tabs = $$ ( schede); this.contents = $$ (contenuto); // determina la scheda "attiva" var active = (Cookie.read (this.options.cookieName) || this.options.startIndex); this.activeTab = this. schede [attivo] .addClass (this.options.activeClass); this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // processa ogni scheda e contenuto this.tabs.each (function (tab, i) this.processItem (tab, this.contents [i], i);, this); // tabs sono pronti - caricalo! this.fireEvent ('load');, processItem: funzione (scheda, contenuto, i) var contentHeight = content.getScrollSize (). y; // aggiunge un evento click alla scheda tab.addEvent ('clic', funzione (e) // stop! if (e) e.stop (); // se non è il scheda attiva se (tab! = this.activeTab) // rimuove la classe attiva dalla scheda attiva this.activeTab.removeClass (this.options.activeClass); // rendere la scheda cliccata la scheda attiva (this.activeTab = tab) .addClass (this.options.activeClass); // tween il vecchio contenuto della scheda su // nell'interpolazione del nuovo contenuto verso il basso this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween' , onComplete: $ vuoto). tween ('height', contentHeight); // attiva l'evento di modifica delle schede this.fireEvent ('change', [tab, content]); .bind (this)). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // salva l'indice in cookie if (this.options.cookieName) Cookie.write (this.options.cookieName, i, this.options.cookieOptions);  .bind (this)); ); / * usage * / window.addEvent ('load', function () var tabset = new TabSet ($$ ('# tabs1 li a'), $$ ('# contents1 li'), cookieName: 'demo- elenco' ); );

Passaggio 4: PHP / HTML

Ricorda come ho detto che avremmo modificato il nostro HTML originale con PHP? Adesso è il momento. Da quando noi potrebbe
avere un set di cookie per il nostro TabSet, dovremmo cercare di rilevarlo quando emettiamo la linguetta HTML.
Perché? Perché vogliamo che le schede vengano caricate senza problemi. Vogliamo anche ospitare utenti che non hanno JavaScript o cookie abilitati.
Senza questo PHP, potresti notare un leggero "salto" nell'area del contenuto attivo.

    " > Scheda 1
 " > Scheda 2
 " > Scheda 3
 " > Scheda 4
 
 
  > Questo è il contenuto della scheda 1. Questo è il contenuto della scheda 1. Questo è il contenuto della scheda 1. Questo è il contenuto della scheda 1. Questo è il contenuto della scheda 1. Questo è il contenuto della scheda 1. Questo è il contenuto della scheda 1. Questo è il contenuto della scheda 1.
 > Questo è il contenuto della scheda 2. Questo è il contenuto della scheda 2. Questo è il contenuto della scheda 2. Questo è il contenuto della scheda 2. Questo è il contenuto della scheda 2. Questo è il contenuto della scheda 2. Questo è il contenuto della scheda 2. Questo è il contenuto della scheda 2.
 > Questo è il contenuto della scheda 3. Questo è il contenuto della scheda 3. Questo è il contenuto della scheda 3. Questo è il contenuto della scheda 3. Questo è il contenuto della scheda 3. Questo è il contenuto della scheda 3. Questo è il contenuto della scheda 3. Questo è il contenuto della scheda 3.
 > Questo è il contenuto della scheda 4. Questo è il contenuto della scheda 4. Questo è il contenuto della scheda 4. Questo è il contenuto della scheda 4. Questo è il contenuto della scheda 4. Questo è il contenuto della scheda 4. Questo è il contenuto per la scheda 4. Questo è il contenuto per la scheda 4.

Passaggio 5: PHP: adattamento per gli utenti senza Javascript o cookie

Alcuni utenti non abilitano JavaScript o cookie per motivi di sicurezza. Vogliamo comunque che il nostro sistema funzioni per loro. Se ricordi dal precedente blocco di codice,
utilizziamo i collegamenti con una chiave di querystring di "elenco-demo" per indicare una modifica nella scheda. Il seguente blocco di PHP nella parte superiore della pagina (prima di qualsiasi output) lo farà
aiutaci a cambiare il valore del cookie nella scheda richiesta.

Nota che aggiorniamo la pagina solo se possiamo verificare che il cookie sia stato impostato. Se il cookie non è stato impostato, l'utente ha disabilitato i suoi cookie.

Missione compiuta!

Ecco un breve riepilogo dei vantaggi della classe TabSet di MooTools:

La nostra classe implementa gli eventi in modo che possiamo creare eventi personalizzati e gestori di eventi.
Il layout dell'intero sistema è completamente controllato da semplici HTML e CSS.
L'uso dei cookie per ricordare la scheda precedente è un grande miglioramento dell'usabilità.
La stessa classe che è una classe MooTools consente di implementarla facilmente da un progetto all'altro.

Inline MooTools Javascript

Ho sempre sostenuto la codifica di una funzionalità MooTools desiderata "in linea" prima di trasformarla in una classe. Ecco il codice JavaScript MooTools in linea:

 $$ ('ul.tabs'). each (function (tabList) // ottiene la lista dei contenuti var tabContentList = tabList.getNext ('ul.tabs-content'), // ottiene il nome del cookie, che è l'attributo "titolo" dell'elenco delle schede cookie = "elenco-demo", // l'indice della scheda iniziale startIndex = Cookie.read (cookie) || 0, // ottiene la scheda effettiva tab items LI = tabList.set (' title ', "). getElements (' li '), // ottiene il contenuto Elementi LI lis = tabContentList.getElements (' li '), // la scheda (LI) attualmente attiva activeTab = tabs [startIndex] .addClass ('attivo'), // il contenuto LI attualmente attivo activeContent = lis [startIndex] .setStyle ('height', 'auto'); // per ogni scheda all'interno di questa tab / relazione del contenuto ... tabs.each (funzione (tab, i) // stopper if (e) e.stop (); // calcola l'altezza dell'elemento di contenuto rispettivo var content = lis [i], contentHeight = content.getScrollSize (). y; // aggiungi il clic evento alla scheda che ... tab.addEvent ('click', function () // se non è la scheda attualmente attivata ... if (tab! = activeTab) // aggiungi e rimuovi la classe attiva dalla vecchia alla nuova scheda activeTab.removeClass ('active'); (activeTab = tab) .addClass ('active'); // avvia il wipe up, elimina l'effetto activeContent.set ('tween', onComplete: function () activeContent = content.fade ('in'). set ('tween', onComplete: $ vuoto). interpolazione ('altezza', contentHeight);). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', '0'); // scrive sul cookie Cookie.write (cookie, i); // fin! ); ); // fire click event activeTab.fireEvent ('click'); );

Si noti che tutte le istruzioni "var" in alto diventano argomenti o opzioni per la classe. La transizione da MooTools JavaScript in linea a una classe è estremamente semplice!

Avere idee di miglioramento?

Hai altre idee per questa classe? Assicurati di condividerli nei commenti qui sotto!

Scrivi un tutorial Plus

Sapevi che puoi guadagnare fino a $ 600 per scrivere un tutorial PLUS e / o screencast per noi? Stiamo cercando tutorial dettagliati e ben scritti su HTML, CSS, PHP e JavaScript. Se sei dell'abilità, contatta Jeffrey a [email protected].

Si prega di notare che il risarcimento effettivo dipenderà dalla qualità del tutorial finale e screencast.

Seguici su Twitter o iscriviti al feed Nettuts + RSS per i migliori tutorial di sviluppo web sul web.

Codice