Početna » šifriranje » Stvaranje kontrolera glasnoće s jQuery UI klizačem
Stvaranje kontrolera glasnoće s jQuery UI klizačem
Ako ste lovac na freebies, vjerojatno ste preuzeli puno PSD korisničkih sučelja (UI). Neki od njih su doista nevjerojatni i mogli bi uštedjeti naše vrijeme prototipovima dizajna na kojem smo radili.
U ovom postu ćemo kodirati PSD UI i pretvoriti ga u nešto funkcionalnije. Kodirat ćemo sljedeći PSD UI klizač koji će se primijeniti kao JQuery UI Slider temu.
Međutim, molim, zabilježi za koje je ovaj vodič namijenjen srednje razine iskustva. Rekavši to, još uvijek je relativno lako slijediti, sve dok ste prilično upoznati s CSS-om i jQuery-jem.
U redu, počnimo sada.
Korak 1: jQuery UI
Očito nam je potrebna jQuery i jQuery UI knjižnica, a imamo dvije mogućnosti da ih iskoristimo. Prvo, možemo povezati jQuery i jQuery UI izravno sa sljedećih CDN-a: Google Ajax API CDN, Microsoft CDN i jQuery CDN, postoji mnogo prednosti korištenja hostirane CDN datoteke kada stavimo našu web-lokaciju uživo.
Ali budući da ćemo raditi na tome samo izvan mreže, koristit ćemo drugi umjesto toga.
Preuzet ćemo i prilagoditi knjižnicu korisničkog sučelja jQuery s službene stranice za preuzimanje. Budući da nam je potreban samo dodatak za klizač, odabrat ćemo samo knjižnicu klizača zajedno s ovisnostima i ostaviti ostale. Tako će datoteke koje koristimo biti mnogo tanje i brže se učitati. Nakon toga, povežite sve te knjižnice s HTML dokumentom, po mogućnosti na dnu stranice ili prije zatvaranja
da budemo točni.
Korak 2: HTML oznaka
Oznaka za klizač je vrlo jednostavna, omotali smo svu potrebnu oznaku - opis alata, klizač i volumen - unutar HTML5 odjeljak označiti. Korisničko sučelje jQuery će potom automatski generirati ostatak.
Korak 3: Instalirajte UI klizač
Isječak u nastavku instalirat će klizač na stranicu, ali primjenjuje se samo zadana konfiguracija.
$ (funkcija () $ ("#slider")) .slider (););
Dakle, ovdje ćemo malo poboljšati klizač dodavanjem drugih konfiguracija.
Prvo, pohranimo element klizača kao varijablu.
var slider = $ ('# klizač'),
Zatim postavljamo minimalnu zadanu vrijednost klizača 35, kada se prvi put učita.
slider.slider (raspon: "min", vrijednost: 35,);
U ovom trenutku još nećemo vidjeti ništa na pregledniku, jer je jQuery UI u osnovi samo generiranje oznake. Dakle, moramo primijeniti neke stilove kako bismo vidjeli rezultat vizualno na pregledniku.
Korak 4: Stilovi
Prije nego što nastavimo, trebamo nešto sredstava iz izvorne datoteke PSD-a, kao što su tekstura pozadine i ikona.
Nećemo razgovarati o tome kako odsjeći u ovom članku samo ćemo se usredotočiti na kod. Ako niste sigurni kako odrezati, prije nego što nastavite, gledajte sljedeću snimku zaslona.
Pretvaranje dizajna iz PSD-a u HTML - Nettuts+
U redu, počnimo s dodavanjem stilova.
Počet ćemo tako što ćemo klizač postaviti u središte prozora preglednika i priložiti pozadinu koju smo izrezali iz PSD-a na tijelo.
body background: url ('… /images/bg.jpg') ponovite gore lijevo; odjeljak širina: 150px; visina: auto; margina: 100px auto 0; pozicija: relativna;
Zatim ćemo primijeniti stilove u opisu alata, glasnoća, ručka, klizač opseg i klizač sebe.
Taj ćemo dio raditi po dio, počevši od ...
klizač
Budući da nismo definirali maksimalnu vrijednost za sam klizač, korisničko sučelje jQuery će primijeniti zadanu vrijednost; to je 100. Stoga se također možemo prijaviti 100 (px) za klizač širina.
Malo smo izmijenili ikonu glasnoće kako bismo ispunili svoju ideju. Ideja je da ćemo stvoriti učinak postupno povećavajte traku glasnoće u skladu s vrijednošću klizača. Siguran sam da ste često vidjeli takav učinak u korisničkom sučelju media playera.
U ovom koraku ćemo početi raditi na posebnom efektu klizača.
Opis
U ovom trenutku, tooltip još nema sadržaja, pa ćemo ga ispuniti vrijednošću klizača. Također, vodoravna pozicija alata će odgovarati položaju ručice.
Prije svega, element alarma pohranimo kao varijablu.
var tooltip = $ ('. tooltip');
Zatim definiramo učinak opisa alata koji smo gore spomenuli u Slide Eventu.
slajd: funkcija (događaj, ui) var vrijednost = slider.slider ('vrijednost'), tooltip.css ('lijevo', vrijednost) .text (ui.value);
No, također želimo da se tooltip u početku skriva.
tooltip.hide ();
Nakon toga, kada rukovati će se početi klizati, prikazat će se s učinkom pojave.
start: funkcija (event, ui) tooltip.fadeIn ('brzo'); ,
A kada korisnik prestane pomicati ručicu, alat će nestati i biti skriven.
stop: funkcija (događaj, ui) tooltip.fadeOut ('brzo'); ,
Svezak
Kao što smo već spomenuli u Odjeljak stilova, planiramo da se ikona glasnoće mijenja sukladno položaju ručice ili da budemo točni, vrijednost klizača. Dakle, mi ćemo primijeniti sljedeću uvjetnu izjavu kako bismo stvorili ovaj učinak.
Ali, prvo, pohranimo element volumena kao i vrijednost klizača kao varijablu.
volume = $ ('. volume');
Zatim započinjemo uvjetnu naredbu.
Kada je vrijednost klizača niža ili jednaka 5 ikona glasnoće uopće neće imati trake, što znači da je glasnoća vrlo niska, ali kada se vrijednost klizača povećava, i traka glasnoće će se početi povećavati.
ako (vrijednosti <= 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'); ;
Sve ih spojite
U redu, u slučaju da ste zbunjeni sa svim gore navedenim stvarima, nemojte biti. Ovdje je prečica. Stavite sve sljedeće kodove u dokument.
Danas smo uspješno kreirali elegantniju jQuery temu korisničkog sučelja, ali u isto vrijeme uspješno smo preveli PSD korisničko sučelje u funkcionalni kontroler glasnoće.
Nadamo se da će vas ovaj udžbenik nadahnuti i pomoći vam da shvatite kako pretvoriti PSD u više upotrebljiv proizvod.
Konačno, ako imate bilo kakvih pitanja u vezi ovog tutoriala, slobodno ga dodajte u odjeljak komentara ispod.
