Vytvoření ovladače hlasitosti pomocí posuvníku jQuery UI

Pokud jste freeries lovec, je pravděpodobné, že jste si stáhli spoustu uživatelských rozhraní PSD (UI). Některé z nich jsou opravdu úžasné a mohou ušetřit čas tím, že prototypujeme design, na kterém jsme pracovali.

V tomto příspěvku budeme kódovat PSD UI a proměnit ho v něco funkčnějšího. Budeme kódovat následující PSD UI Slider, který bude použit jako téma jQuery UI Slider.

nicméně, vezměte prosím na vědomí Tento návod je určen střední úrovně zkušeností. Řekl jsem, že je to stále poměrně snadné sledovat, pokud jste docela obeznámeni s CSS a jQuery.

Dobře, pojďme začít.

Krok 1: Uživatelské rozhraní jQuery

Samozřejmě potřebujeme jQuery a jQuery UI Library, a máme dvě možnosti, jak je využít. Za prvé, můžeme propojit jQuery a jQuery UI přímo z následujícího CDN: Google Ajax API CDN, Microsoft CDN a jQuery CDN, existuje mnoho výhod používání hostovaného CDN souboru, když dáme naše stránky živě online.

Ale protože na něm budeme pracovat pouze offline, budeme používat druhý místo toho.

Knihovnu jQuery UI si stáhneme a upravíme z oficiální stránky pro stahování. Protože potřebujeme pouze plugin Slider, vybereme pouze knihovnu Slider spolu se závislostmi a ostatní necháme. Tímto způsobem budou soubory, které používáme, mnohem štíhlejší a rychlejší. Poté připojte všechny tyto knihovny k dokumentu HTML, nejlépe v dolní části stránky nebo před zavřením značka musí být přesná.

Krok 2: Značení HTML

Značení pro posuvník je velmi jednoduché, zabalili jsme všechny potřebné značky - tooltip, posuvník a hlasitost - uvnitř HTML5 sekce štítek. Uživatelské rozhraní jQuery pak automaticky vygeneruje zbytek.

Krok 3: Nainstalujte uživatelské rozhraní Slider

Níže uvedený úryvek nainstaluje posuvník na stránku, ale použije pouze výchozí konfiguraci.

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

Takže tady budeme trochu vylepšovat jezdce přidáním dalších konfigurací.

Nejprve uložíme posuvný prvek jako proměnnou.

 var slider = $ ('# slider'),

Pak nastavíme minimální výchozí hodnotu jezdce, který má být kolem 35, při prvním naložení.

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

V tomto okamžiku v prohlížeči ještě nic nevidíme, protože uživatelské rozhraní jQuery je v podstatě pouze generování značek. Musíme tedy použít některé styly, aby se výsledek viděl vizuálně v prohlížeči.

Krok 4: Styly

Před pokračováním potřebujeme některá aktiva ze zdrojového souboru PSD, například texturu pozadí a ikonu.

Nebudeme o tom mluvit jak řezat v tomto článku se zaměříme pouze na kód. Pokud si nejste jisti, jak řezat, sledujte nejprve následující obrazovku před pokračováním.

Převod designu z PSD na HTML - Nettuts+

Dobře, teď začněme přidávat styly.

Začneme umístěním jezdce do středu okna prohlížeče a připojíme pozadí, které jsme nařezali z PSD na tělo.

 body background: url ('… /images/bg.jpg') opakuje vlevo nahoře;  section width: 150px; výška: auto; okraj: 100px auto 0; poloha: relativní;

Dále použijeme styly pro nápovědy, hlasitost, držadlo, posuvníku rozsah a posuvníku sám.

Uděláme tuto část po částech, počínaje…

Posuvník

Jelikož jsme nedefinovali maximální hodnotu samotného Slideru, použije jQuery UI výchozí nastavení; to je 100. Můžeme tedy také aplikovat 100 (px) pro posuvník šířka.

 #slider border-width: 1px; hraniční styl: pevná; hraniční barva: # 333 # 333 # 777 # 333; hraniční rádius: 25px; šířka: 100px; pozice: absolutní; výška: 13px; barva pozadí: # 8e8d8d; pozadí: url ('… /images/bg-track.png') opakujte vlevo nahoře; box-shadow: inset 0 1px 5px 0px rgba (0, 0, 0, 5), 0 1px0 0px rgba (250, 250, 250, 5); vlevo: 20x;

Popis

Panel nástrojů bude umístěn nad posuvníkem určením jeho polohy absolutně s -25px pro jeho horní pozice.

 .tooltip pozice: absolutní; zobrazení: blok; nahoru: -25px; šířka: 35px; výška: 20px; barva: #ff; zarovnání textu: střed; písmo: 10pt Tahoma, Arial, sans-serif; hraniční rádius: 3px; ohraničení: 1px pevné # 333; box-shadow: 1px 1px 2px 0px rgba (0, 0, 0, .3); velikost krabice: rámeček; pozadí: lineární gradient (top, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);

Objem

Ikona hlasitosti jsme trochu upravili, abychom splnili náš nápad. Myšlenka je vytvořit efekt Postupně zvyšujte hlasitost podle hodnoty posuvníku. Jsem si jistý, že jste takový efekt viděli často v uživatelském rozhraní přehrávače médií.

 .volume display: inline-block; šířka: 25px; výška: 25px; vpravo: -5px; pozadí: url ('… /images/volume.png') no-repeat 0 -50px; pozice: absolutní; margin-top: -5px;

Rukojeť uživatelského rozhraní

Styl rukojeti je poměrně jednoduchý; to bude mít ikonu, která vypadá jako kovový kruh, nakrájený od PSD, a spojený jako pozadí.

Změníme také režim kurzoru na ukazatel, takže si uživatel všimne, že tento prvek je přetažitelný.

 .ui-slider-handle pozice: absolutní; z-index: 2; šířka: 25px; výška: 25px; kurzor: ukazatel; pozadí: url ('… /images/handle.png') neopakovat 50% 50%; font-weight: tučné; barva: # 1C94C4; obrys: žádný; nahoru: -7px; okraj vlevo: -12px;

Rozsah jezdce

Rozsah posuvníku bude mít mírně bílou barvu přechodu.

 .ui-slider-range pozadí: lineární gradient (horní, #ffffff 0%, # eaeaea 100%); pozice: absolutní; ohraničení: 0; nahoru: 0; výška: 100%; hraniční rádius: 25px;

Krok 5: Efekt

V tomto kroku začneme pracovat na speciálním efektu Slideru.

Popis

V tomto bodě nemá popis ještě žádný obsah, takže jej vyplníme hodnotou posuvníku. Vodorovná poloha nástroje bude také odpovídat poloze rukojeti.

Nejprve uložíme element tooltipu jako proměnnou.

 var tooltip = $ ('. tooltip');

Pak definujeme efekt tooltipu, který jsme zmínili výše v Slide Event.

 slide: function (event, ui) var value = slider.slider ('value'), tooltip.css ('levá', hodnota) .text (ui.value);

Chceme však také, aby byl popis nástroje zpočátku skrytý.

 tooltip.hide ();

Po tom, když Rukojeť se začne posouvat, bude zobrazen s efektem fade-in.

 start: function (event, ui) tooltip.fadeIn ('rychlý'); ,

A když uživatel přestane posouvat rukojeť, tooltip zmizí a bude skrytý.

 stop: function (event, ui) tooltip.fadeOut ('rychlý'); ,

Objem

Jak jsme zmínili výše v Sekce Styly, plánujeme, aby se ikona hlasitosti odpovídajícím způsobem změnila s polohou rukojeti nebo aby byla přesná, hodnotu posuvníku. Pro vytvoření tohoto efektu tedy použijeme následující podmíněný příkaz.

Nejprve však uložíme prvek hlasitosti a hodnotu posuvníku jako proměnnou.

 volume = $ ('. volume');

Pak začneme podmíněné prohlášení.

Pokud je hodnota posuvníku nižší nebo rovna hodnotě 5 ikona hlasitosti nebude mít vůbec žádné pruhy, což znamená, že hlasitost je velmi nízká, ale když hodnota jezdce roste, pruh hlasitosti se začne zvyšovat také.

 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'); ;

Dejte je dohromady

Dobře, v případě, že jste zmateni se všemi výše uvedenými věcmi, nebuďte. Zde je zkratka. Do dokumentu vložte všechny následující kódy.

 $ (function () var slider = $ ('# slider'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (rozsah: "min", min: 1, hodnota: 35, start: function (event, ui) tooltip.fadeIn ('fast');, slide: function (event, ui) var value = slider.slider ('value'), volume = $ ('. '); tooltip.css (' left ', value) .text (ui.value); 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'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); );

V pořádku, podívejme se na výsledek v prohlížeči.

Demo
Stáhněte si zdroj

Závěr

Dnes jsme úspěšně vytvořili elegantnější téma jQuery UI, ale zároveň jsme úspěšně přeložili uživatelské rozhraní PSD do funkčního regulátoru hlasitosti.

Doufáme, že vás tento průvodce inspiruje a může vám pomoci pochopit, jak se ze systému PSD stává produkt, který je použitelnější.

Konečně, pokud máte nějaké otázky týkající se tohoto tutoriálu, neváhejte ho přidat do komentáře níže.