Toți am văzut efectul tip "acordeon" folosit pe multe site-uri Web 2.0; totuși, multe scripturi de acordeon sunt grele, nu fac uz de bibliotecile pe care se bazează și nu se ocupă de lucruri cum ar fi asigurarea că acordeonul păstrează o înălțime consistentă. În acest tutorial, vom folosi bibliotecile Prototype și Scriptaculous pentru a crea un acordeon ușor și inteligent.
Demo și cod sursă
Pasul 1 - Obiectivul
Obiectivul nostru este de a crea un script acordeon ușor, bazat pe bibliotecile javascript Prototype și Scriptaculous. Acordeonul ar trebui:
Permiteți un număr nelimitat de geamuri de acordeon
Fii complet stil de CSS
Fiți dezbracați - utilizatorii fără javascript activat ar trebui să vadă conținutul dvs. de acordeon
Be Light Weight - Cu relativ puține linii de cod; utilizați delegarea evenimentelor pentru a limita consumul de memorie.
Susțineți orice fel de conținut în acordeon
Asigurați-vă că atunci când conținutul fiecărui panou acordeon se schimbă, înălțimea acordeonului rămâne constantă pentru a evita efectul deranjant al "paginii"
Acesta este un tutorial relativ avansat care presupune că cititorul are cunoștințe rezonabile despre Javascript, CSS, HTML, Object-Oriented programare și o înțelegere de bază a bibliotecilor prototipului și scripturilor. Cu toate acestea, codul sursă complet este disponibil pentru tine de a studia și codul este foarte simplu de citit și de învățat de la dacă nu sunteți familiarizat cu specificul bibliotecile folosite.
Înainte de a începe, puteți vedea o demonstrație de lucru a acordeonului în acțiune.
Pasul 2 - Începeți cu marcarea de bază
Pentru a începe, vom crea un simplu markup HTML pentru acordeonul nostru:
Comutați 1
Conținut 1
Comutați 2
Conținutul 2
Comutați 3
Conținut 3
Comută 4
Conținut 4
Pasul 3 - Adăugați un anumit stil
Apoi, trebuie să adăugăm un stil în jurul acordeonului nostru pentru a face să pară un acordeon. În primul rând, vom face o primă trecere a stilului de bază și vom adăuga mai mult atunci când totul va funcționa. Există, de asemenea, unele suplimentare stiluri care trebuie incluse pentru a se asigura că acordeonul va fi afișat corect, pe măsură ce animă.
div # test-acordeon margine: 10px; frontieră: 1px solid #aaa; div.accordion poziție: relativă; / * cerută pentru legare - funcționează în jurul unei "particularități" în Prototype * / div.accordion-toggle position: relative; / * necesar pentru efect * / z-index: 10; / * este necesar pentru efect * / background: #eee; / * necesar pentru efect - poate fi orice, cu excepția "transparent" * / cursor: pointer; div.accordion-toggle-active fundal: #fff; div.accordion-content overflow: hidden; / * necesar pentru efect * / background: #aaa;
Vedeți acordeonul de bază cu o foaie de stil simplă.
Pasul 4 - Creați Clasa Accordion Javascript
Prototype oferă un cadru minunat pentru construirea de clase în Javascript și vom folosi acea funcționalitate pentru a construi clasa noastră de acordeon. Această clasă va conține toate proprietățile și metodele unui acordeon: afișarea curentă panoul, conținutul acordeonului, metodele de extindere și contracarare a panourilor și metodele de manipulare a evenimentelor pentru a defini ce se întâmplă când utilizatorii fac o acțiune cum ar fi clicul. Pentru moment, vom stabili structura de bază a clasei, precum și toate proprietățile și metodele de care avem nevoie:
var Accordion = Class.create (initialize: function () this.accordion = null; / * Stocheaza un pointer catre elementul acordeon; / this.contents = null; / * Array de pointeri la rubricile si panourile de continut ale acordeonul * / this.options = null; / * Permite utilizatorului să definească numele claselor css * / this.maxHeight = 0; / * Stochează înălțimea celui mai înalt panou de conținut * / this.current = null; / * Stochează un indicator pentru panoul de conținut extins curent * / this.toExpand = null; / * Stochează un pointer în panoul de conținut pentru a se extinde când un utilizator dă clic pe * / this.isAnimating = false; / * Urmărește dacă animația este sau nu (*), / * Ascunde panourile care nu sunt afișate în mod implicit * / attachInitialMaxHeight: funcția () () , / * Asigură faptul că înălțimea primului panou de conținut se potrivește cu cel mai înalt * / expand: funcția (el) , / * Spune funcția de animație pe care elem (e) / * Determinați unde un utilizator a dat clic și a acționa pe baza acelui clic * / * / animate: funcția () , / * Efectuează animația reală a efectului de acordeon * / handleClick: );
Acestea sunt metodele și proprietățile de bază de care avem nevoie atunci când ne construim acordeonul. Fiecare dintre pașii următori va te să construiești fiecare metodă până când avem un acordeon de lucru. În orice moment în timpul tutorialului de care aveți nevoie o reîmprospătare rapidă a ceea ce este pentru fiecare metodă sau proprietate, puteți utiliza acest cod puternic comentat ca referință.
Pasul 5 - Inițializare: Începeți lucrurile
Clasele de prototip au o metodă specială numită initalize (), care este un constructor; acest lucru înseamnă că acționează atunci când utilizatorul creează un nou obiect de instanță din acea clasă. Pentru orice acordeon, trebuie să știm 2 lucruri înainte de a începe:
Id-ul elementului de acordeon.
Poziția de pornire implicită a acordeonului (dacă este altceva decât prima poziție)
Deci, va trebui să permitem constructorului nostru să accepte acești doi parametri. În plus, constructorul nostru trebuie:
Recuperarea și stocarea acordeonului și a conținutului său ca indicii pentru acele elemente
Setați opțiunile definite de utilizator
Setați elementul extins curent
Determinați înălțimea maximă pe care o vom folosi ca înălțime pentru toate panourile de conținut și aplicați-o
Ascundeți panourile de conținut care nu sunt afișate în mod prestabilit
Adăugați un ascultător de evenimente la acordeon pentru a urmări clicurile utilizatorilor.
După cum puteți vedea, am setat toate proprietățile noastre la valori implicite rezonabile și am sunat la 3 metode pentru a ajuta la stabilirea lucrurilor sus. În cele din urmă, l-am atașat pe mânerul evenimentului la acordeon. Să creem aceste trei metode și manipularea evenimentului.
Pasul 6 - Verificarea celui mai înalt element
Una dintre cerințele acordeonului nostru este că trebuie să scadă astfel încât chiar și atunci când cel mai înalt panou de conținut este extins, înălțimea totală a acordeonului va rămâne constantă. Pentru a realiza acest obiectiv, vom itera prin panourile de conținut pentru a determina care dintre ele este cea mai înaltă și a seta proprietatea maxHeight în consecință:
checkMaxHeight: funcția () pentru (var i = 0; i this.maxHeight) this.maxHeight = această.contents [i] .getHeight ();
Pasul 7 - Ascunderea restului
Acordeonul nostru ar trebui să afișeze numai panoul de conținut specificat ca panou curent; toate celelalte ar trebui să fie ascunse în mod implicit. În plus, trebuie să setăm atributul de înălțime al acestui panou de conținut la 0; aceasta împiedică panoul de conținut din apărând pe scurt complet extins înainte de a anima în mod corespunzător.
initialHide: functie () pentru (var i = 0; i
Pasul 8 - Afișați panoul de conținut implicit
Acum, că am ascuns tot panoul de conținut implicit, trebuie să vă asigurați că panoul de conținut implicit este afișat corect; trebuie să aibă aplicat stilul "activ" și înălțimea să se potrivească cu proprietatea maxHeight:
attachInitialMaxHeight: funcția () this.current.previous ('div.' + this.options.toggleClass) .addClassName (this.options.toggleActive); dacă (this.current.getHeight ()! = this.maxHeight) this.current.setStyle (height: this.maxHeight + "px");
Pasul 9 - Creați aplicația Handler pentru evenimente
Dacă veniți dintr-un context tradițional de gestionare a evenimentului în care atașăm dispozitivul de gestionare a evenimentelor în fiecare zonă pe care dorim să o faceți clic, poate părea confuză faptul că atașăm doar un singur element. Noi folosim eveniment delegație. Pentru cei necunoscuți cu acest subiect, am scris o scurtă prezentare prezentare generală a delegației evenimentului vă va prezenta conceptul și de ce este atât de important. Acestea fiind spuse, avem nevoie de un programator inteligent de evenimente:
funcția clickHandler: funcția (e) var el = e.element (); dacă (el.hasClassName (this.options.toggleClass) &&! this.isAnimating) this.expand (el);
Există două părți ale acestei funcții. În primul rând, determinăm ce a fost făcut clic. Apoi, verificăm să ne asigurăm că a fost a titlu pe care a fost făcut clic și că nu rulează în prezent animație. În acest caz, numim metoda expand () pentru a începe procesul acordeonului. Variabila pe care o transmitem metodei expand () este titlul pe care a făcut clic utilizatorul.
Pasul 10 - Începeți procesul
Acum putem începe procesul de realizare a efectului de acordeon. Știm că metoda expand () trebuie să ia un parametru pentru element care a fost clickat. Folosind acest parametru, metoda de extindere determină ce panou de conținut să se extindă și dacă acesta nu este deja extins, sună metoda animate () pentru a "face magia!"
extensia: funcția (el) this.toExpand = el.next ('div.' + this.options.contentClass); dacă (this.current! = this.toExpand) this.toExpand.show (); this.animate (); ,
Pasul 11 - Efectuarea "lucrării murdare"
În acest moment, toate piesele sunt în loc; știm ce panou de conținut este afișat în prezent, știm ce titlu utilizatorul a făcut clic și știm ce panou de conținut a solicitat utilizatorul să fie afișat. Acum, trebuie să creăm acordeonul animaţie. Pentru aceasta, vom crea o metodă animate () care va folosi Efectul Scriptaculous.Parallel pentru a render cele două animații împreună; și clasa Effect.Scale pentru a modifica dimensiunea fiecărui panou de conținut. Metoda animată va efectuați acești pași:
Creați o matrice care va fi utilizată pentru stocarea obiectelor Effect.Scale
Colectați parametrii pentru a trece la constructorul Effect.Scale pentru panoul de conținut care va fi afișat și creați obiectul
Adăugați acel obiect la matricea noastră
Colectați parametrii pentru a trece la constructorul Effect.Scale pentru panoul de conținut care va fi ascuns și creat obiectul
Adăugați acel obiect la matricea noastră
Creați obiectul Effect.Parale care va rula obiectele Effect.Scale este sincronizat.
Spuneți obiectului Accordion că animăm
Rulați animațiile
Curăță orice stiluri lăsate în urmă
Spuneți obiectului Accordion că am terminat animarea
Pentru o explicație completă a parametrilor de opțiune trecem la obiectele Effect.Scale și Effect.Parallel, consultați documentația Scriptaculous. Aspectele importante ale metodei sunt metodele înainte și după finalizare pe efectul nostru. Paralel. Înainte de a începe metoda spune acordeonului pe care îl animă în prezent. Acest lucru va împiedica încercarea de pornire a procesatorului de evenimente orice alte modificări, atâta timp cât animația este în desfășurare. Se asigură, de asemenea, că poziția la care a fost făcut clic este dat fiind numele clasei "active". Metoda afterFinish ascunde complet panoul de conținut care a fost afișat anterior (după ce a dispărut din cauza animației). De asemenea, se asigură că înălțimea finală a conținutului nou afișat este corect. Acum, când swap-ul este complet, acesta ne spune acordeonului că panoul de conținut extins în prezent este unul pe care l-am extins recent și animația este completă.
Pasul 12 - Adăugarea unui stil mai mare
În acest moment avem un acordeon decent, pe care îl puteți vedea în acțiune aici. Dar cu un mic CSS putem face totul să arate mult mai spectactular. Deci, mai întâi vom crea o machetă rapidă Photoshop, așa că avem o idee grosolană despre cum ar trebui să arate totul. Având în vedere acest lucru, vom avea nevoie de trei imagini:
Share
Accentsconagua
și 
