Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. PHP
Code

Vytvorenia pokrok Bar s Javascript

by
Difficulty:IntermediateLength:LongLanguages:

Slovak (Slovenčina) translation by Tereza Foretová (you can also view the original English article)

Pokrok Bar je jeden z najnovšie súčasti pridať ku knižnici vynikajúce UI widgety a interakcie pomocníci postavený na vrchole jQuery. To bolo predstavené v najnovšiu verziu knižnice, ktorá v čase písania je 1.7.




Pokrok bar je v súčasnosti len determinovat, čo znamená, keď sme ho aktualizovať, musíme povedať jednoznačne čo je jeho hodnota, a musíme vedieť vopred pri dokončení procesu sa používa na meranie. Tento widget nie je najlepšou voľbou pre proces, ktorý bude trvať neurčitý dĺžka času na dokončenie.
Je to veľmi jednoduchý widget s malým API vystavuje obmedzený počet objektov a metód, ale to môže byť stále účinný a je skvelé pre poskytovanie vizuálnu spätnú väzbu návštevníkov o percentuálnom podiele proces zostáva pred dokončením.

Začíname

Budeme potrebovať kópiu aktuálnej verzii jQuery UI, ktorý možno získať od staviteľa na stiahnutie na http://jqueryui.com/download. Akonáhle sme si stiahli, budeme musieť rozbaliť tak, aby zachovať existujúcu štruktúru adresárov. Sme mali vytvoriť nový adresár na našom počítači, volal jQuery UI a potom vnútri tejto vytvoriť ďalší nový priečinok s názvom jqueryui1.7. Archív by potom malo byť rozbalený do priečinka jqueryui1.7.

Archív bude obsahovať všetko, čo potrebujeme začať; minified a neskomprimované verzie všetkých súborov knižnice, niektoré tému súbory (predvolený motív je príhodne pomenovanej hladkosť), a dokonca aj najnovšiu verziu knižnice jQuery.

Indikátor sa opiera o množstvo súborov pre správne fungovanie; Tieto sú uvedené nižšie v poradí, v ktorom mali by byť pridané do našej stránky:

  • UI.Core.CSS
  • UI.theme.CSS
  • UI.progressbar.CSS
  • jQuery [currentversion] .js
  • UI.Core.js
  • UI.progressbar.js

Prvé tri súbory sú súčasťou rozsiahlych CSS rámec a používajú sa dať pokrok bar jeho charakteristický vzhľad. Nebudeme musieť držať s touto témou v reálnej implementácie; Máme veľa možností na prispôsobenie vrátane obrovské množstvo prednastavených motívov k dispozícii priamo od Themeroller, vlastný motív môžeme navrhnúť sami pomocou Themeroller alebo dokonca vlastnú tému sme vytvoriť manuálne naliehavými pravidiel definovaných v predvolené štýly. Sme zvyknutý robiť žiadne z tých vecí, v tomto tutoriále však, ale môžeme použiť niektoré z tried uvedených v rámci.

Základnej stránky

Veľmi málo základných prirážka je potrebný tento widget; všetko čo potrebujeme, okrem knižnice zdrojov uvedených vyššie, je jednoduchý kontajnera prvku. V textovom editore, vytvoriť nasledujúce stránky shell s potrebnými zdrojmi a kontajnera prvku:

Uložiť ako progressBar.html v koreňovom adresári jQuery UI. Dáme stylesheets vpravo na začiatku súboru a skripty vpravo na konci; to je dôvodov výkonu ako stránky načítať obsah rýchlejšie, keď nie sú snaží načítať JavaScript v rovnakom čase. To je dobre zdokumentované výkon praxe, ktorá je najlepšie dodržiavať. Nechali sme prázdne skripte značku v spodnej časti stránky. Poďme si pridať nejaký kód tam ďalej:

Pri inicializácii predvolené pokrok bar, všetko, čo môžeme urobiť je volanie jeho konštruktéra metóda, progressbar kontajner prvok, že widget má byť vydaný do. Pri spustení tejto stránky vo vašom prehliadači, mali by ste vidieť, že pokrok bar bol vytvorený a automaticky vyplní celú šírku jeho obal, ktorá v tomto prípade je orgánom strany:

Nastavenie hodnoty pokrok bar

Pokrok bar hodnota sa nastaví na nulu v predvolenom nastavení, čo je dôvod, prečo sa zdá prázdny na predchádzajúcom obrázku. Vyplniť pokrok bar, musíme nastaviť vlastnosť hodnota; zmeniť funkciu konštruktéra tak, že zobrazí ako takto:

Vlastnosť hodnota určuje percento pokrok bar, ktorý je vyplnený, dáva veľkú vizuálnu spätnú väzbu na návštevníka na aká časť úlohy je ponechaná na dokončenie. Indikátor by mal byť teraz polovice naplnené, ako na nasledujúcom obrázku:

Získanie hodnoty pokrok Bar

Stále aktuálna hodnota widget je tak jednoduché, ako to bolo stanoviť môžeme použiť jeden z jej metód vrátiť aktuálnu hodnotu majetku. Po počiatočnej konštruktéra, pridajte nasledujúci kód:
Set mouseover pokrok bar

Pridali sme dve jednoduché anonymný funkcie, ktoré sú spustené na mouseover a mouseout udalosti vypaľovaný pokrok bar (Poznámka, že ide o štandardný DOM udalosti nie vlastné indikátor udalosti). Všetko robíme v prvú funkciu je vytvoriť nový odsek s aktuálnou hodnotou pokrok bar ako jej innerText a pripojiť ku stránke.

Hodnota sa načíta metódou možnosť. Argument priradený k metóde je názov vlastnosť by sme chceli získať. Druhá funkcia jednoducho odstráni správu znova. Hlásenie je znázornené na nasledujúcom obrázku:

Vlastnosti, udalosti a metódy

Hodnota majetku, alebo možnosť, je v súčasnosti iba konfigurovateľné vlastnosť progress bar; v tomto príklade budeme nastaviť keď widget je inicializovaný pri prechode ho ako objekt objekt konfigurácie. Ak chcete nastaviť túto vlastnosť po widget bola inicializovaná využívame metódu možnosť. Používať túto metódu v režime seter, musíme prejsť v druhý parameter špecifikuje Nová hodnota, ako je tento:

Možno sa čudujete, prečo som povedal, "druhý parameter" keď jednoznačne existujú tri argumenty vyššie uvedený riadok kódu. Hoci sme pomocou možnosti metódy, nie je vlastne voláme ju priamo. Namiesto toho sme volať metódu konštruktéra znova, ale to hovoril, že by sme chceli volať metódu možnosť. Widget bude volať metódu interne, absolvovanie dvoch parametrov ("hodnota" a 75) ktorý míňame štrku po názvu metódy.

Pokrok bar vystavuje jednej udalosti, zmeniť udalosť, ktorá poskytuje mechanizmus pre nás na háku do tak, že môžeme reagovať na zmeny v jeho hodnotu. Toto je vlastné udalosť, takže môžeme detekovať a reagovať na to dvoma spôsobmi. Môžeme definovať anonymnej funkcie ako hodnota vlastnosť zmena konfigurácie objektu, ako sme robili s vlastnosť hodnota, alebo môžeme použiť jQuery je viazať metóda špecifikovať anonymnej funkcie vykonávať. Jemný rozdiel medzi týmito dvoma je, že najprv sa vykoná kód stanovený metódou viazať.
Pokrok bar API odhaľuje päť metód, ktoré sú uvedené nižšie:

  • zničiť
  • vypnúť
  • zapnúť
  • možnosť
  • hodnota

Všetky tieto metódy sa používajú rovnakým spôsobom ako voľba spôsobu, ktorý sme si; volaním konštruktéra metóda zadanie názvu metódy a akékoľvek parametre, ktoré by sme chceli preniesť. Väčšina z nich by mala byť docela samo-vysvetľujúce.

Pomocou pokrok Bar

V tomto príklade doteraz bol veľmi jednoduchý, pre tých z vás, ktoré môžu nie ste nepoužili jQuery UI vôbec. Poďme trochu urýchliť veci a dať dohromady niečo blíži také veci by sme chceli robiť pri správnej implementácii. V tomto príklade bude základné rovnako, ale to by mala dať oveľa lepšiu predstavu o ako widget možno pracovať pre nás. Naše hotové stránku sa objaví niečo ako toto:

Nový súbor v textovom editore, aby Štart s nasledujúce základné stránky:

Uložiť ako regForm.html v priečinku jQuery UI. V hornej časti stránky sme odkaz na CSS rámec; to je hlavne pridať požadovaný štýl pre pokrok bar, ale tiež môžeme použiť niektoré z tried poskytuje na naše vlastné prvky. Máme tiež pridať vlastný štýl, ktorý vytvoríme čoskoro.

Telo stránka obsahuje niekoľko rozložení prvkov a uzlov nejaký text, ale hlavné prvky sú kontajner pre pokrok bar a forme. Formulár je rozdelený do niekoľkých sekcií pomocou div a fieldset prvkov. Dôvodom pre to je tak, že môžeme skryť časti formulára aby to vyzeralo, ako keby to pokrýva niekoľko strán.

Pridali sme odsek a štítok vedľa pokrok bar, sme toto budem umiestnite tak, aby sa objavujú vnútri pokrok bar. Odsek obsahuje jednoduchý textový reťazec. Označenie sa bude používať Zobraziť aktuálnu hodnotu pokroku.

Vonkajšieho kontajnera je daný niekoľko mien, triedy; Prvá je, že môžeme použiť niektoré vlastné styling pre prvok, ale druhé dve sú zamerať sa na rôzne vlastnosti CSS rámca. Ui-helper-clearfix trieda sa používa na automaticky vymazať vznášala prvky a je skvelý spôsob, ako znížiť neporiadok ďalších a zbytočných div prvky.

Ui-corner-všetky triedy používa na poskytnutie kontajnera prvku (ako aj pokroku bar sama, ktorá má automaticky a prvky nášho fieldset) zaoblené rohy pomocou niekoľkých pravidiel vlastný štýl. Toto sú iba podporované webkit a gecko prehliadačoch založených, ale v prírode progressive vylepšenia je úplne prijateľné použiť ich. Progressive vylepšenia diktuje, že môžeme poskytnúť posilnenú styling na našich webových stránkach pre prehliadače, ktoré sú schopné zobrazovanie je. Iné prehliadače budú mať len hranatého kontajner.

Používame inej triedy z CSS rámec v podobe; niekoľko panelov treba byť skrytý pri prvom načítaní stránky, preto môžeme použiť ui-helper-skryté triedy, aby sa zabezpečilo, že sú nastavené na zobrazenie: žiadny, keď chceme ukázať im, všetci musíme urobiť, je odstrániť tento názov triedy.

V dolnej časti tela (dôvodov výkonu, to naozaj nefunguje, mimochodom!) sme odkaz vyžaduje JavaScript zdroje z knižnice. Posledný prvok skript je prázdny a čaká na kód, ktorý prinesie forme a pokrok bar do života. Dodajme že budúci:

V rámci vonkajších document.ready krátku rezaným máme funkciu konštruktor pre pokrok bar; míňame konštruktéra doslovný Konfigurácia objektu obsahujúce jeden objekt. To je zmena vlastníctva a umožňuje nám poskytovať anonymné funkcie spustiť zakaždým, keď zistí vlastné change event. Môžeme použiť túto udalosť aktualizovať štítok, ktorý budeme pozície dovnútra pokrok bar.

Zakaždým, keď udalosť je vyhodili sme chytiť aktuálnu hodnotu pokrok bar metódou možnosť a nastavte hodnotu ako text menovky. Udalosť je vyhodili po vykonaní zmeny, tak získame hodnotu bude vždy novú hodnotu.

Ďalej máme kliknite obslužný program pre budúci > tlačidlo; po kliknutí na toto tlačidlo bude viesť k aktuálnej stránke formulár zmena prostredníctvom série animácie a hodnota aktualizácie pokroku bar. Musíme tiež urobiť pár ďalších vecí. Predvolené správanie tlačidla vnútri formulára je predložiť formulár, ktorý nechceme robiť v tejto fáze, takže prvá vec, ktorú robí naša kliknite obslužný program je zabrániť formulár posiela pomocou preventDefault() funkcia JavaScript. Toto sa nazýva udalosti objektu, ktorý bude automaticky prenesená na anonymnej funkcie.

Potom sme sa pozrieť cez každý zo samostatných porôt v formulári s cieľom zistiť aktuálny panel; Prvá vec, ktorú robíme, je kontrola aktuálny panel nie je prvý panel a ak nie, sme umožniť tlačidlo späť, ktorý je štandardne vypnuté. Iba jeden panel sa zobrazí v jednom okamihu, tak nájdeme na paneli, ktorý nemá skryté ui helper triedu a fade out. Sme určite anonymný callback funkcie spustiť po dokončení fade.

V rámci tejto druhej funkcii výber ďalšieho prvku a zobraziť ju. Ak je ďalší prvok v záverečnom paneli, ktorý má identifikátor vďaka, môžeme zakázať ďalší > tlačidlo. Hoci nemáme báť skutočného predloženia formulára v tomto príklade, je to, kde sme mohli posielať údaje získané z formulára na serveri. Budeme odstrániť skryté ui helper triedu ako panel je teraz viditeľné.

Nakoniec používame metódu možnosť opäť, tentoraz v seter režim, nastavenie novej hodnoty pokrok bar. Nová hodnota, ktoré míňame na metódu ako druhý parameter je jednoducho aktuálnu hodnotu plus 50, ako tam sú len 2 časti formulára. Táto posledná časť potom vyvolá funkcia, ktoré aktualizuje štítok.

Ďalej musíme pridať veľmi podobné kliknite obslužný program pre

To je teraz celý kód, ktorý budeme potrebovať, teraz všetci musíme urobiť, je pridať niektoré základné CSS položiť napríklad nový súbor v textovom editore, pridajte nasledujúci kód:

Uložiť ako regForm.css v rovnakom priečinku ako súbor HTML. Teraz mali mať funkčnú stránku s káblové až pokrok bar. Keď sme spustenie stránky mali zistíme že sme môžete prechádzať každý panel formulára a indikátor sa aktualizuje podľa toho:

Zhrnutie

V tomto článku sme sa zaoberali veľmi užitočný pokrok bar, ktorý môžeme použiť ako vizuálna pomôcka povedať návštevníkom, koľko už určený proces bude trvať dokončenie percento-múdry. Ponúka atraktívne a užitočné prezentácie informácií, spôsobom, ktorý by mal byť ľahko zrozumiteľný našich návštevníkov.

Sme sa pozrel na ubytovanie a udalosti, ktoré sú vystavené jeho API a pozreli sme sa na jednu z metód, ktoré môžeme nazvať urobiť pokrok bar niečo urobiť. Príklad, ktorý sme skončili s by mal bežať dokonale vo všetkých hlavných prehliadačoch, hoci to vyzerať trochu chaotický v dobrej ol "IE (čo by bolo veľmi jednoduché opraviť boli sme ochotní robiť tak).

  • Vyberajte NETTUTS RSS Feed pre viac daily web rozvoja Tutsi a články.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.