Share
Bara de progres este una dintre cele mai recente componente care trebuie adăugată la biblioteca excelentă a widget-urilor UI și a ajutoarelor de interacțiune construite pe partea de sus a jQuery. A fost introdusă în cea mai recentă versiune a bibliotecii, care la momentul redactării este de 1.7.
Bara de progres este determinată în prezent, ceea ce înseamnă că atunci când o actualizăm, trebuie să îi spunem în mod explicit valoarea acesteia și trebuie să știm în prealabil când procesul utilizat este pentru măsurarea completă. Acest widget nu este în prezent cea mai bună alegere pentru un proces care va dura o perioadă nedeterminată de timp.
Este un widget foarte simplu, cu un mic API care expune un număr limitat de proprietăți și metode, dar poate fi în continuare extrem de eficient și este excelent pentru a oferi feedback vizual vizitatorilor cu privire la procentajul unui proces care a rămas înainte de a fi finalizat.
Vom avea nevoie de o copie a versiunii curente a jQuery UI, care poate fi obținută de la constructorul de descărcări de la http://jqueryui.com/download. Odată ce l-am descărcat, va trebui să îl despachetăm astfel încât structura directorului existent să fie păstrată. Ar trebui să creați un nou director pe calculatorul nostru numit jQuery UI și apoi să creați un alt director nou numit jqueryui1.7. Arhiva ar trebui dezarhivată în folderul jqueryui1.7.
Arhiva va conține tot ceea ce avem nevoie pentru a începe; miniaturi și versiuni necomprimate ale tuturor fișierelor de bibliotecă, unele fișiere tematice (tema implicită este neteda numită) și chiar și cea mai recentă versiune a bibliotecii jQuery.
Bara Progress se bazează pe un număr de fișiere pentru a funcționa; acestea sunt listate mai jos în ordinea în care trebuie adăugate pe pagina noastră:
Primele trei fișiere fac parte din cadrul extins al CSS și sunt utilizate pentru a conferi barei de progres aspectul său distinct. Nu trebuie să ne menținem această temă într-o implementare în lumea reală; avem multe opțiuni pentru personalizare, inclusiv un număr imens de teme preconfigurate disponibile direct de la Themeroller, o temă personalizată pe care o putem crea folosind Themeroller sau chiar o temă personalizată pe care o creăm manual prin suprimarea regulilor definite în foile de stil implicite. Nu vom face niciunul din aceste lucruri în acest tutorial, dar putem folosi câteva din clasele oferite de cadru.
Este nevoie de o foarte mică marjă de bază pentru acest widget; tot ce avem nevoie, pe lângă resursele bibliotecii enumerate mai sus, este un element simplu de container. În editorul de text, creați următoarea coajă de pagină cu resursele necesare și elementul container:
jQuery UI Bar de progres
Salvați acest lucru ca progressBar.html în directorul jQuery UI rădăcină. Am pus foile de stiluri chiar la începutul fișierului și scripturile chiar la sfârșit; aceasta este din motive de performanță deoarece paginile încarcă conținutul mai rapid atunci când nu încearcă să încarce JavaScript în același timp. Aceasta este o practică de performanță bine documentată la care se aderă cel mai bine. Am lăsat o etichetă de scriere goală în partea de jos a paginii; să adăugăm un cod în continuare:
Accentsconagua
$ (functie () // apel bar constructor progres $ ("# container") progressbar ();); Pentru a inițializa bara de progres implicită, tot ceea ce facem este să apelați metoda constructorului, bara de progres, pe elementul containerului în care va fi redat widgetul. Când rulați această pagină în browserul dvs., ar trebui să vedeți că bara de progres a fost creată și umple automat lățimea containerului său, care este în acest caz corpul paginii:
Valoarea bara de progres va fi setată la zero în mod implicit, motiv pentru care apare goală în ecranul anterior. Pentru a umple bara de progres, trebuie să setăm proprietatea valorii; schimbați funcția constructorului astfel încât să apară după cum urmează:
// introduceți bara progresului constructor $ ("# container"). bara de progres (value: 50); Valoarea proprietății determină procentul barei de progres care este umplut, oferind un mare vizibil feedback vizitatorului cu privire la cât de mult din sarcină este lăsată pentru a finaliza. Bara de progres ar trebui acum să fie complet umplută, ca în următoarea imagine:
Obținerea valorii actuale a widget-ului este la fel de ușor ca și setarea; putem folosi una din metodele sale pentru a returna proprietatea valorii curente. După constructorul inițial, adăugați următorul cod:
// setați mouseover pentru bara de progres
$ ("container"). mouseover (funcția () // afișează valoarea curentă $ ("")" .attr ("id", "procent") text ($ ("container")) bară de progres ("opțiune", "valoare") + "% completă" ; // set mouseout pentru bara de progres $ ("# container") mouseout (function () // ascunde valoarea $ ("#%").
Am adăugat două funcții anonime simple care sunt declanșate în evenimentele mouseover și mouseout declanșate de bara de progres (rețineți că acestea sunt evenimente standard DOM, nu evenimente personalizate pentru bara de progres). Tot ceea ce facem în prima funcție este să creezi un nou paragraf cu valoarea curentă a barei de progres ca text interior și să o anexezi la pagină.
Valoarea este extrasă utilizând metoda opțiunii. Argumentul transmis metodei este numele proprietății pe care am dori să o regăsim. A doua funcție elimină pur și simplu mesajul. Mesajul este afișat în următoarea captură de ecran:
Proprietatea de valoare sau opțiunea este, în prezent, singura proprietate configurabilă a barei de progres; în acest exemplu, îl setăm când widget-ul este inițializat prin trecerea acestuia ca proprietate a unui obiect de configurare. Pentru a seta această proprietate după ce widgetul a fost inițializat, am folosi metoda opțiunii. Pentru a utiliza această metodă în modul setter, trebuie să trecem printr-un al doilea parametru care specifică noua valoare, după cum urmează:
bara de progres ("opțiune", "valoare", 75) S-ar putea să te întrebi de ce am spus "un al doilea parametru" atunci când există clar trei argumente în linia de mai sus a codului. Chiar dacă folosim metoda opțiunii, nu o sunăm direct. În schimb, apelăm din nou metoda constructorului, dar spunem că dorim să apelăm la metoda opțiunii. Widgetul va apela metoda intern, trecând cei doi parametri ("valoare" și 75) pe care îi transmitem constructorului după numele metodei.
Bara de progres prezintă un eveniment unic, evenimentul de schimbare, care oferă un mecanism pentru noi, pentru a putea răspunde la modificările valorii sale. Acesta este un eveniment personalizat, astfel încât să putem detecta și să reacționăm la acesta în două moduri diferite. Putem defini o funcție anonimă ca valoare a proprietății schimbării într-un obiect de configurare, așa cum am făcut-o cu proprietatea valorii, sau putem folosi metoda de legare a jQuery pentru a specifica funcția anonimă de executat. O diferență subtilă între cele două este că codul specificat folosind metoda de legare va fi executat mai întâi.
Bara de progres API expune cinci metode, care sunt enumerate mai jos:
Toate aceste metode sunt utilizate exact în același mod ca metoda opțiunii pe care am analizat-o; prin apelarea metodei constructorului specificând numele metodei și parametrii pe care vrem să trecem. Cele mai multe dintre acestea ar trebui să fie destul de explicative.
Acest exemplu a fost foarte simplu pentru cei dintre voi care nu au mai folosit jQuery UI deloc. Să facem puțin lucrurile și să punem împreună ceva care se apropie de genul de lucru pe care ne-ar plăcea să-l facem într-o implementare corectă. Acest exemplu va fi de asemenea de bază, dar ar trebui să ofere o idee mult mai bună despre modul în care widget-ul poate fi făcut pentru a lucra pentru noi. Pagina noastră finalizată va apărea astfel:
Faceți un început cu următoarea pagină de bază într-un fișier nou din editorul dvs. de text:
jQuery UI Bar de progres Formular de înregistrare
Progres:
