Vytvorenie regulátora hlasitosti pomocou posuvníka jQuery UI

Ak ste lovec freebies, je pravdepodobné, že ste si stiahli množstvo používateľských rozhraní PSD (UI). Niektoré z nich sú skutočne úžasné a mohli by sme ušetriť čas prototypovaním dizajnu, na ktorom sme pracovali.

V tomto príspevku budeme kódovať PSI UI a premeniť ho na niečo funkčnejšie. Budeme kódovať nasledujúci PSD UI Slider, ktorý sa použije ako jQuery UI Slider.

však, prosím urobte si poznámky pre ktoré je tento návod určený stredných úrovniach skúseností. Hovoril som, že je stále relatívne ľahké sledovať, pokiaľ ste dosť oboznámení s CSS a jQuery.

Dobre, teraz začneme.

Krok 1: používateľské rozhranie jQuery

Samozrejme potrebujeme jQuery a jQuery UI Library a máme dve možnosti ich využitia. Po prvé, môžeme prepojiť užívateľské rozhranie jQuery a jQuery priamo z nasledujúcich CDN: Google Ajax API CDN, Microsoft CDN a jQuery CDN, existuje veľa výhod používania hosťovaného súboru CDN, keď sme našu stránku naživo online.

Ale pretože budeme pracovať len na ňom offline, budeme používať druhý namiesto toho.

Na oficiálnej stránke na prevzatie si stiahneme a upravíme knižnicu používateľského rozhrania jQuery. Keďže budeme potrebovať len plugin Slider, vyberieme len knižnicu posuvníkov spolu s ich závislosťami a necháme ostatné. Týmto spôsobom súbory, ktoré používame, budú oveľa štíhlejšie a môžu sa načítať rýchlejšie. Potom prepojte všetky tieto knižnice s dokumentom HTML, najlepšie v spodnej časti stránky alebo pred ukončením označenie je presné.

Krok 2: Označenie HTML

Značka pre posúvač je veľmi jednoduchá, zabalili sme všetky potrebné značky - popis, posuvník a zväzok - do HTML5 časť tag. Užívateľské rozhranie jQuery potom automaticky vytvorí zvyšok.

Krok 3: Nainštalujte používateľské rozhranie jazdca

Nasledujúci úryvok nainštaluje posuvník na stránku, ale použije iba predvolenú konfiguráciu.

 $ (funkcia () $ ("#slider") .slider (););

Takže tu trochu zvýšime posuvník pridaním ďalších konfigurácií.

Najprv uložíme posuvný prvok ako premennú.

 var posuvník = $ ('# slider'),

Potom nastavíme minimálnu predvolenú hodnotu posuvného ovládača 35, pri prvom načítaní.

 slider.slider (rozsah: "min", hodnota: 35,);

V tomto okamihu ešte nebudeme vidieť nič v prehliadači, pretože používateľské rozhranie jQuery je v podstate len generovanie značiek. Musíme preto použiť niektoré štýly, aby sme v prehliadači mohli vidieť výsledok vizuálne.

Krok 4: Styly

Predtým, než budeme pokračovať, potrebujeme niektoré zdroje zo zdrojového súboru PSD, ako je textúra pozadia a ikona.

O tom nebudeme hovoriť ako nakrájať v tomto článku sa budeme sústrediť na kód. Ak si nie ste istí, ako nakrájať, najprv si prečítajte nasledujúci screencast pred pokračovaním.

Konverzia návrhu z PSD na HTML - Nettuts+

Dobre, teraz začneme pridávať štýly.

Začneme umiestnením posúvača v strede okna prehliadača a pripojením pozadia, ktoré sme vystrihli z PSD na telo.

 body background: url ('... /images/bg.jpg') opakovať vľavo hore;  sekcia width: 150px; výška: auto; okraj: 100 pixelov auto 0; pozícia: relatívna;

Potom budeme používať štýly pre nápoveda, hlasitosť, kľučka, jazdec rozsah a slider sám.

Urobíme túto časť po častiach, počnúc ...

slider

Keďže sme nedefinovali maximálnu hodnotu pre samotný posuvník, používateľské rozhranie jQuery použije predvolenú hodnotu; to znamená 100. Preto môžeme tiež použiť 100 (px) pre posuvník šírka.

 #slider okraj-šírka: 1px; hraničný štýl: pevný; hraničná farba: # 333 # 333 # 777 # 333; polomer okrajov: 25 pixlov; šírka: 100px; poloha: absolútna; výška: 13px; farba pozadia: # 8e8d8d; pozadie: url ('... /images/bg-track.png') opakovať vľavo hore; box-tieň: vložený 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); vľavo: 20px;

popisok

Nástrojový tip bude umiestnený nad posúvačom zadaním jeho pozícia absolútne s -25px pre jeho v hornej polohe.

 .tooltip pozícia: absolútna; zobrazenie: blok; hore: -25px; šírka: 35px; výška: 20px; farba: #fff; text-align: center; písmo: 10pt Tahoma, Arial, sans-serif; polomer okrajov: 3px; hranica: 1px masívna # 333; box-tieň: 1px 1px 2px 0px rgba (0, 0, 0, .3); rozmery v políčku: okrajové pole; pozadie: lineárny gradient (vrchol, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);

objem

Ikonu hlasitosti sme trochu upravili, aby sme splnili náš nápad. Myšlienkou je, že vytvoríme efekt stláčajte postupne hlasitosť v súlade s hodnotou posúvača. Určite ste často videli taký efekt v používateľskom rozhraní prehrávača médií.

 .objem zobrazenie: inline-block; šírka: 25px; výška: 25px; pravá: -5px; pozadie: url ('... /images/volume.png') no-repeat 0 -50px; poloha: absolútna; margin-top: -5px;

Rukoväť UI

Štýl rukoväte je dosť jednoduchý; bude mať ikonu, ktorá vyzerá ako kovový kruh, nakrájaný z PSD a pripojený ako pozadie.

Takisto zmeníme kurzor na režim ukazovateľ, takže používateľ si všimne, že tento prvok je schopný presunúť.

 .ui-posuvník-rukoväť pozícia: absolútna; z-index: 2; šírka: 25px; výška: 25px; kurzor: ukazovateľ; pozadie: url ('... /images/handle.png') opakovanie 50% 50%; font-weight: tučné; farba: # 1C94C4; obrys: žiadny; top: -7px; margin-left: -12px;

Rozsah posúvačov

Rozsah posúvača bude mať mierne biele gradientné farby.

 .ui-posuvník-rozsah pozadie: lineárny gradient (vrchol, #ffffff 0%, # eaeaea 100%); poloha: absolútna; hranica: 0; top: 0; výška: 100%; polomer okrajov: 25 pixlov;

Krok 5: Účinok

V tomto kroku začneme pracovať na špeciálnom efekte Šmýkača.

popisok

V tomto okamihu nástrojový popis ešte nemá žiadny obsah, takže ho naplníme hodnotou posuvného ovládača. Taktiež horizontálna poloha nástroja bude zodpovedať pozícii rukoväte.

Najprv uložíme prvok tooltip ako premennú.

 var tooltip = $ ("tooltip");

Potom definujeme efekt nástroja, ktorý sme spomenuli vyššie vo vnútri udalosti Slide.

 slide: funkcia (udalosť, ui) var value = slider.slider ('hodnota'), tooltip.css ('left', hodnota) .text (ui.value);

Ale tiež chceme, aby bol tip na prvýkrát skrytý.

 tooltip.hide ();

Potom, keď rukoväť sa chystá začať posúvať, bude zobrazené s efektom vyblednutia.

 štart: funkcia (udalosť, ui) tooltip.fadeIn ('rýchlo'); ,

A keď používateľ prestane posúvať rukoväť, nápoveda sa vytrati a skryje sa.

 stop: funkcia (udalosť, ui) tooltip.fadeOut ('fast'); ,

objem

Ako sme už uviedli v časti Styly, plánujeme ikonu hlasitosti, aby sme mohli zodpovedajúco zmeniť pozíciu rukoväte alebo presne, hodnotu posúvača. Pre vytvorenie tohto efektu použijeme nasledovné podmienené vyhlásenie.

Ale najprv uložíme objemový prvok, ako aj hodnotu posuvníka ako premennú.

 objem = $ ('. objem');

Potom spustíme podmienené vyhlásenie.

Ak je hodnota posuvníka nižšia alebo rovná 5 ikona hlasitosti neobsahuje žiadne pruhy, čo naznačuje, že hlasitosť je veľmi nízka, ale keď sa hodnota posuvníka zvyšuje, zvýši sa úroveň hlasitosti.

 if (hodnota <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ;

Dajte ich dohromady

Dobre, v prípade, že ste zmätení so všetkými vyššie uvedenými vecami, nebuďte. Tu je skratka. Do svojho dokumentu vložte všetky nasledujúce kódy.

 $ slider.slider (rozsah: "min", min: 1, hodnota: $ (slúchadlo) 35, start: funkcia (udalosť, ui) tooltip.fadeIn ('rýchlo'); slide: funkcia (udalosť, ui) var value = slider.slider '), tooltip.css (' ľavý ', hodnota) .text (ui.value), ak (hodnota <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); );

Dobre, teraz ukážeme výsledok v prehliadači.

demonštrácie
Stiahnuť zdroj

záver

Dnes sme úspešne vytvorili elegantnejšiu jQuery UI tému, ale zároveň sme úspešne preložili PSD užívateľské rozhranie do funkčného regulátora hlasitosti.

Dúfame, že tento návod vás inšpiruje a pomôže vám pochopiť, ako zmeniť PSD na viac použiteľný produkt.

Nakoniec, ak máte akékoľvek otázky týkajúce sa tohto tutoriálu, neváhajte ho pridať do sekcie komentárov nižšie.