Filuri sexy Animate folosind MooTools

O modalitate modernă și atractivă de a plasa o mulțime de conținut într-un spațiu mic este prin utilizarea unui sistem tab. Acest tutorial vă va arăta cum să creați un sistem de filme sexy, animat, completat cu spioni CSS, cookie-uri și swap-uri de filme animate.

Ipoteze

Există câteva ipoteze și observații că intrăm în acest sistem cu:

• Vom folosi cea mai recentă versiune a MooTools: 1.2.4.
• Clientul trebuie să accepte JavaScript.
• Vom folosi PHP pentru orice scripting de la server. Orice limbă de server de la alegerea dvs. va funcționa, de asemenea, sintaxa / metodele corespunzătoare

Tutorialul presupune, de asemenea, o cunoaștere de bază a javascript-ului. Un pic de MooTools sau experienta cadru JavaScript va ajuta.

Plotul

Deci, cum funcționează acest sistem minunat? Iată rezumatul de bază:

• Atunci când pagina se încarcă, emise două liste UL cu elemente de listă: prima listă conține filele, a doua listă conține elementele de conținut tab.
• Pentru fiecare set de fila pe care îl emitem, verificăm dacă există un cookie dat care ne-ar putea spune ce fișier ar trebui afișat în funcție de vizita precedentă. Dacă nu este prezent niciun cookie, ne asumăm prima filă.
• Atunci când utilizatorul face clic pe o filă, elementul de conținut curent pentru această filă se îndepărtează din vedere și se introduce un nou conținut de fila.
• Salvăm indexul filei într-un fișier cookie pentru scopuri viitoare de încărcare (adică dorim ca ultimul clic să fie primul care va fi afișat pe pagina următoare).

Sistemul în sine este destul de bulletproof. Dacă utilizatorul nu permite cookie-urile, fila de pornire pentru fiecare listă va fi întotdeauna 0.
Dacă nu există suport pentru JavaScript, filele nu vor fi afișate pe ecran pe măsură ce vom afișa: none; inițial.

Pasul unu: codul HTML

HTML-ul pentru a realiza sistemul tab și elementele de conținut corespunzătoare este incredibil de simplu în structură.

 
 
 
Tab. 1
 
Tab 2
 
Tab 3
 
Tab 4
 
 
 
 
Acesta este conținutul pentru fila 1.
 
Acesta este conținutul pentru fila 2.
 
Acesta este conținutul pentru fila 3.
 
Acesta este conținutul pentru fila 4.
 
 

Vom modifica HTML-ul de mai sus cu PHP mai târziu în acest tutorial pentru a crea un sistem mai robust.

Pasul al doilea: CSS

Ca și în cazul oricărui combo CSS și HTML, puteți personaliza filele și elementele de conținut ale acestora, oricum doriți.
Am ales să utilizez sprite de tip CSS în stilul Facebook pentru filele mele de exemplu.
Realizați că veți dori să modelați următoarele elemente într-un mod specific, astfel încât sistemul să funcționeze:

• Elementele conținutului filei trebuie să aibă o înălțime de 0, iar depășirea acestora să fie ascunsă. Acest lucru permite ca toate elementele de conținut să fie "ascunse", ca să spunem așa, când pagina se încarcă.
• Între selectorii CSS "ul.tabs li a" și "ul.tabs li a.active", veți dori să atribuiți selectorului "activ" un aspect diferit, astfel încât utilizatorul să știe "fila selectată în prezent.

 / * tab-uri structură * / .tab-container width: 320px; fundal: #eee; padding: 5px 10px;  ul.tabs list-style-type: none; margin: 0; padding: 0;  ul.tabs li float: stânga; margine: 10px 5px 0 0;  ul.tabs li a padding: 5px 10px; frontieră: 1px solid #ddd; font-weight: bold; fundal: url (tab-sprite.jpg) 0 0 repet-x; color: # 000; text-decoration: none;  ul.tabs li a.active limita-culoare: # 028433; Poziția fundalului: 0 -96px; Culoare: #fff;  / * sprite! swap pozitie de fundal * / ul.tabs li a.active:hover text-decorare: nimic; cursor: implicit;  ul.tabs li: hover text-decorare: subliniere;  ul.tabs-content margine: 10px 0 0 0; padding: 0;  ul.tabs-conținut li înălțimea: 0; overflow: ascuns; margin: 0; padding: 0;  / * șterge flotoare * / div.clear clar: ambele;  / * adică fixează * / * html ul.tabs-content li float: left;  / * ie6 * / * + html ul.tabs-conținut li lățime: 99%; plutește la stânga;  / * ie7 * /

Rețineți că trebuie să implementăm câteva corecții specifice pentru Internet Explorer; urât, dar necesar.

Pasul al treilea: Javascript-ul MooTools

Unul dintre marile avantaje ale MooTools este sistemul puternic de clasă.
Clasele MooTools permit funcționalități flexibile, organizate și extensibile.
Clasa MooTools va fi numită "TabSet". Deoarece clasa TabSet efectuează mai multe acțiuni,
vă permite să descompuneți fiecare parte a clasei.

Prima linie dă întotdeauna clasei un nume:

 / * da clasei un nume * / var TabSet = new Class (

În continuare trebuie să creați un obiect care să dețină opțiunile clasei noastre:

 opțiuni: // opțiuni pentru fila implicită activeClass: 'active', // css class cookieName: ", // nu nume înseamnă cookie cookieOpțiuni: // opțiuni pentru cookie, dacă durata dorită a cookie-ului: 30, // 30 zile path: '/', startIndex: 0 // începe cu acest element dacă nu există cookie sau activ,

Opțiunile noastre ne permit să definim:

• activeClass: Clasa CSS care trebuie atribuită fișierului selectat (sau "activ").
• cookieName: numele cookie-ului care va reprezenta acest set de file. Dacă nu definiți un nume de cookie, nu vor fi utilizate cookie-urile.
• cookieOptions: Un obiect care deține opțiunile pentru cookie.
• startIndex: fila pentru a fi activă inițial. Începe cu 0. Suprascris de variabila activClass în cazul în care se găsește un cookie.

Cu doar trei opțiuni în clasă, TabSet ar fi considerat o clasă relativ simplă.

Apoi implementăm două Opțiuni și Evenimente:

 Implemente: [Opțiuni, Evenimente],

Implementarea opțiunilor și a evenimentelor ne va permite să gestionăm corect opțiunile și opțiunile date
incendii personalizate încărcați și modificați evenimentele din listele noastre oriunde în cadrul clasei.

Apoi definim metoda "initialize", care ruleaza la crearea fiecarui exemplu al clasei:

 inițializa: funcția (tab-uri, conținut, opțiuni) // argumentează acest lucru.setOptions (opțiuni); // amestecați opțiunile date cu opțiunile implicite this.tabs = $$ (tabs); // salvați filele din clasa this.contents = $$ (conținut); // salvați conținutul dat în cadrul clasei // determina fila "activă" var active = (cookie.read (this.options.cookieName) || this.options.startIndex); // decide indexul care ar trebui să fie activ inițial this.activeTab = this.tabs [active] .addClass (this.options.activeClass); // identificați acum fila "activă" this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // identificați conținutul "activ" // executați combo-ul fiecărei file / conținut prin metoda "processItem" pe care o vom vedea mai jos. [i], i);, aceasta); // tab-urile sunt gata - incarca incarcatura! this.fireEvent ( 'încărcare'); ,

Următoarea metodă a căii de lucru a clasei TabSet: processItem:

 processItem: funcție (tab, conținut, i) var contentHeight = content.getScrollSize () y; // adăugați un eveniment de clic în fila tab.addEvent ('click', funcția () // dacă nu este fila activă dacă (tab! = this.activeTab) // stopper if (e) e.stop ( ); // elimina clasa activă din fila activă this.activeTab.removeClass (this.options.activeClass); // face fila clic pe fila activă (this.activeTab = tab) .addClass (this.options.activeClass) ; // între vechiul conținut al fila în susul conținutului nou introdus în acest.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). ', onComplete: $ empty) tween (' height ', contentHeight); // incendiu eveniment schimbare file this.fireEvent (' schimbare ', [tab, content]); setStyles (height: contentHeight, overflow: 'ascuns') fade ('out') tween ('height', 0); this.options.cookieName, i); .bind (acest lucru)); );

Iată schema de bază a ceea ce face metoda processItem:

1. Acceptă o filă de potrivire, un element de conținut și indexul său ...
2. Calculează înălțimea elementului de conținut.
3. Adaugă un eveniment de clic pe fila care:
   1. Validează faptul că această filă nu este deja activă (nu vrem să animăm sau să schimbăm nimic dacă fac clic pe fila deja activă)
   2. Elimină clasa CSS "activă" din fila curentă și o adaugă la fila care a fost doar făcută clic.
   3. Slidează conținutul fila curentă din vedere, apoi glisează conținutul nou în vizualizare. Evenimentul "schimbare" este declanșat când animația este finalizată.
   4. Salvează indicele filmei noi în modul cookie, astfel încât atunci când utilizatorul reîncarcă pagina sau trece la o altă pagină, noua filă va fi selectată inițial.

Și acum o utilizare exemplară a clasei noastre:

 fereastra.addEvent ('domready', functie () var tabset = nou TabSet ($ 'tabs1 li a'), $$ ('contents1 li'), cookieName: demo-list); );

Oferim exemplul nostru fila LI A și conținutul LI. Oferim, de asemenea, argumentul opțiunilor opționale. Atât de ușor este să folosiți această clasă! Iată clasa completă cu utilizare:

 / * class * / var TabSet = clasa nouă (opțiuni: activeClass: 'activ', // css class cookieName: ', cookieOptions: duration: 30, // calea 30 zile:' / ', startIndex: 0 // începe cu acest element dacă nu există nici un cookie sau activ, Implementează: [Opțiuni, Evenimente], inițializează: funcție (file, conținut, opțiuni) // argumentează acest argument.setOptions (opțiuni); this.tabs = $$ (pentru conținut); // determina fila "activă" var active = (cookie.read (this.options.cookieName) || this.options.startIndex); this.activeTab = aceasta. [active] .addClass (this.options.activeClass); this.activeContent = this.contents [active] .setStyle ('înălțime', 'auto'); // procesați fiecare filă și conținutul acesteia.tabs.each (tab, i) this.processItem (tab, this.contents [i], i);, aceasta); // tabs sunt gata - (e) // stop! if (e) if (e) () e.stop (); // dacă nu este fila activă dacă (tab! = this.activeTab) // eliminați clasa activă din fila activă this.activeTab.removeClass (this.options.activeClass); // faceți fila clic pe fila activă (this.activeTab = tab) .addClass (this.options.activeClass); // între conținutul vechi al filei și conținutul noului conținut de pe acest.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in ') set (' tween ' , onComplete: $ empty) tween ("înălțime", contentHeight); // incendiu eveniment schimbare fila this.fireEvent ('schimbare', [tab, conținut]); (height: contentHeight, overflow: 'ascuns'). // salvați indexul în cookie dacă (this.options.cookieName) Cookie.write (this.options.cookieName, i, this.options.cookieOptions);  .bind (acest lucru)); ); / * use * / window.addEvent ('load', function () var tabset = nou TabSet ($ 'tabs1 li a' listă););

Pasul patru: PHP / HTML

Îți amintești cum am spus că vom modifica codul HTML original cu PHP? Acum e timpul. De cand noi Mai
aveți un set cookie setat pentru TabSet, ar trebui să încercăm să detectăm faptul că atunci când ieșim din fila HTML.
De ce? Pentru că vrem ca filele să se încarce fără probleme. De asemenea, dorim să se acomodeze pentru utilizatorii care nu au activat JavaScript sau cookie-urile.
Fără acest PHP, este posibil să observați un salt "ușor" în zona de conținut activ.

  
 
 
" > Tab 1
 
" > Tab 2
 
" > Tab 3
 
" > Tab 4
 
 
 
 
> Acesta este conținutul pentru fila 1. Acesta este conținutul pentru fila 1. Acesta este conținutul pentru fila 1. Acesta este conținutul pentru fila 1. Acesta este conținutul pentru fila 1. Acesta este conținutul pentru fila 1. Această este conținutul pentru fila 1. Acesta este conținutul pentru fila 1.
 
> Acesta este conținutul pentru fila 2. Acesta este conținutul pentru fila 2. Acesta este conținutul pentru fila 2. Acesta este conținutul pentru fila 2. Acesta este conținutul pentru fila 2. Acesta este conținutul pentru fila 2. Aceasta este conținutul pentru fila 2. Acesta este conținutul pentru fila 2.
 
> Acesta este conținutul pentru fila 3. Acesta este conținutul pentru fila 3. Acesta este conținutul pentru fila 3. Acesta este conținutul pentru fila 3. Acesta este conținutul pentru fila 3. Acesta este conținutul pentru fila 3. Aceasta este conținutul pentru fila 3. Acesta este conținutul pentru fila 3.
 
> Acesta este conținutul pentru fila 4. Acesta este conținutul pentru fila 4. Acesta este conținutul pentru fila 4. Acesta este conținutul pentru fila 4. Acesta este conținutul pentru fila 4. Acesta este conținutul pentru fila 4. Această este conținutul pentru fila 4. Acesta este conținutul pentru fila 4.
 
 

Pasul Cinci: PHP: Acoperirea pentru utilizatori fără Javascript sau cookie-uri

Unii utilizatori nu permit JavaScript sau cookie-uri în scopuri de securitate. Încă vrem ca sistemul nostru să funcționeze pentru ei. Dacă vă amintiți din blocul precedent de cod,
folosim legături cu o cheie de interogare a "demo-list" pentru a indica o schimbare în fila. Următorul bloc de PHP din partea de sus a paginii (înainte de orice ieșire) va
ajutați-ne să modificăm valoarea cookie-ului în fila solicitată.

Rețineți că actualizăm numai pagina dacă putem verifica dacă modul cookie a fost setat. În cazul în care cookie-ul nu a fost setat, utilizatorul are cookie-urile dezactivate.

Misiune indeplinita!

Iată un rezumat rapid al beneficiilor clasei MoTools TabSet:

• Clasa noastră implementează evenimente astfel încât să putem crea evenimente personalizate și agenți de procesare a evenimentelor.
• Amplasarea întregului sistem este controlată complet prin simple coduri HTML și CSS.
• Utilizarea cookie-urilor pentru a vă aminti fila anterioară este o îmbunătățire a utilizabilității.
• Clasa foarte clară că este o clasă MooTools permite ca aceasta să fie ușor implementată de la proiect la proiect.

Inline MooTools Javascript

Întotdeauna am pledat pentru codificarea unei funcții MooTools dorite "inline" înainte de ao transforma într-o clasă. Iată codul MooTools inline JavaScript:

 $$ ('ul.tabs') fiecare (functie (tabList) // a lua lista de continut var tabContentList = tabList.getNext ('ul.tabs-content'), // obtine numele cookie-ului atributul "title" al listei de fișiere cookie = 'demo-list', // indexul fișierului de pornire startIndex = Cookie.read (cookie) || 0, // obține fila real LI items tabs = tabList.set (' ("li"), // obțineți elementele LI de conținut lis = tabContentList.getElements ('li'), // fila (LI) activă în prezent activeTab = tabs [startIndex] .addClass ("activ"), // conținutul LI care este activ în prezent activeContent = lis [startIndex] .setStyle ('înălțime', 'auto'); // pentru fiecare filă din această filă / relație de conținut ... tabs.each (tab, i) // opriți dacă (e) e.stop (); // calculați înălțimea elementului respectiv de conținut var content = lis [i], contentHeight = content.getScrollSize () eveniment la tab-ul care ... tab.addEvent ('click', functie () // daca nu este tab-ul activat momentan ... daca (tab! = activeTab) // adauga si indeparteaza clasa activă din fila veche versus noua activeTab.removeClass ("activă"); (activTab = tab) .addClass ("activ"); // începe să ștergeți, ștergeți efectul activeContent.set ('tween', onComplete: function () activeContent = content.fade ('in') set ('tween', onComplete: $ empty). adăugați ('height', '0'); adăugați ("height", contentHeight); // scrie în cookie Cookie.write (cookie, i); // fin! ); ); // eveniment click fire activeTab.fireEvent ('click'); );

Observați că toate instrucțiunile "var" din partea de sus devin fie argumente, fie opțiuni pentru clasă. Trecerea de la JavaScript în linie MooTools la o clasă este extrem de simplă!

Au idei de îmbunătățire?

Aveți mai multe idei pentru această clasă? Asigurați-vă că le distribuiți în comentariile de mai jos!

Scrie un tutorial Plus

Știați că puteți câștiga până la 600 USD pentru a scrie un tutorial PLUS și / sau pentru noi? Căutăm tutoriale detaliate și bine scrise despre HTML, CSS, PHP și JavaScript. Dacă sunteți în măsură, contactați Jeffrey la [email protected].

Rețineți că o compensație reală va depinde de calitatea tutorialului final și a scenariului.

• Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.