Ustvarjanje krmilnika glasnosti z drsnikom jQuery UI
Če ste lovci na freebies, verjetno ste prenesli veliko PSD uporabniških vmesnikov (UI). Nekateri od njih so resnično neverjetni in bi lahko prihranili naš čas z izdelavo prototipov, na katerih smo delali.
V tem prispevku bomo kodirali PSD UI in ga spremenili v nekaj bolj funkcionalnega. Bomo kodirali naslednji PSD UI Slider, ki se bo uporabljal kot JQuery UI Slider tema.
Vendar pa, prosim, upoštevajte za katero je ta vadnica namenjena srednje vrednosti izkušenj. Ob dejstvu, da je še vedno relativno enostavno slediti, dokler ste precej seznanjeni s CSS in jQuery.
V redu, začnimo zdaj.
1. korak: uporabniški vmesnik jQuery
Očitno potrebujemo jQuery in knjižnico uporabniškega vmesnika jQuery in imamo dve možnosti, da ju uporabimo. Prvič, lahko povežemo jQuery in jQuery uporabniški vmesnik neposredno iz naslednjih CDN: Google Ajax API CDN, Microsoft CDN in jQuery CDN, obstaja veliko prednosti uporabe gostiteljske CDN datoteke, ko smo postavili našo spletno stran v živo na spletu.
Ker pa bomo to delali samo brez povezave, bomo uporabljali drugič namesto tega.
Knjižnico jQuery UI bomo prenesli in prilagodili na uradni strani za prenos. Ker potrebujemo samo drsnik, bomo skupaj s svojimi odvisnostmi izbrali samo knjižnico drsnika in ostale zapustili. Tako bodo datoteke, ki jih uporabljamo, veliko tanjše in se bodo hitreje nalagale. Nato povežite vse te knjižnice z dokumentom HTML, po možnosti na dnu strani ali pred zaprtjem
natančno.
Korak 2: Oznaka HTML
Oznaka za drsnik je zelo preprosta, zavili smo vse potrebne oznake - namig, drsnik in glasnost - znotraj HTML5 oddelek oznaka. UI jQuery bo nato samodejno ustvaril ostalo.
3. korak: Namestite uporabniški vmesnik drsnika
Odrezek spodaj bo namestil drsnik na stran, vendar bo uporabil samo privzeto konfiguracijo.
$ (funkcija () $ ("#slider")) .slider (););
Torej, tukaj bomo malo povečali drsnik z dodajanjem drugih konfiguracij.
Najprej shranimo element drsnika kot spremenljivko.
var slider = $ ("# drsnik"),
Nato nastavimo najnižjo privzeto vrednost drsnika 35, ko je prvič naložen.
slider.slider (obseg: "min", vrednost: 35,);
Na tej točki še ne bomo videli ničesar v brskalniku, ker je uporabniški vmesnik jQuery v bistvu le ustvarjanje oznake. Torej moramo uporabiti nekaj stilov, da vidimo rezultat vizualno v brskalniku.
4. korak: Slogi
Pred nadaljevanjem potrebujemo nekaj sredstev iz izvorne datoteke PSD, kot sta tekstura ozadja in ikona.
Ne bomo govorili o tem kako rezati v tem članku se bomo osredotočili le na kodo. Če niste prepričani, kako rezati, si pred nadaljevanjem ogledate naslednjo zaslonsko sliko.
Pretvarjanje modela iz PSD v HTML - Nettuts+
V redu, zdaj začnimo z dodajanjem slogov.
Začeli bomo z namestitvijo drsnika na sredino okna brskalnika in priložili ozadje, ki smo ga izrezali iz PSD, na telo.
body ozadje: url ('… /images/bg.jpg') ponovite zgoraj levo; odsek širina: 150px; višina: avto; margin: 100px auto 0; položaj: relativna;
Nato bomo uporabili sloge za opisu orodja, glasnosti, ročico, drsnik območju in drsnik sam.
Ta del po delih bomo začeli z…
Drsnik
Ker nismo definirali največje vrednosti za sam drsnik, bo uporabniški vmesnik jQuery uporabil privzeto vrednost; to je 100. Zato se lahko prijavimo tudi 100 (px) za drsnik premer.
Ikona glasnosti smo nekoliko spremenili, da bi izpolnili našo idejo. Ideja je, da bomo ustvarili učinek postopno dvignite vrstico za glasnost v skladu z vrednostjo drsnika. Prepričan sem, da ste takšen učinek pogosto videli v uporabniškem vmesniku za predvajalnik predstavnosti.
V tem koraku bomo začeli delati na posebnem učinku drsnika.
Namig
Na tej točki še ni vsebine, zato jo bomo zapolnili z vrednostjo drsnika. Tudi vodoravni položaj orodja bo ustrezal položaju ročice.
Najprej shranimo element nasvetov kot spremenljivko.
var tooltip = $ ('tooltip');
Potem definiramo učinek opisa orodja, ki smo ga omenili zgoraj, v Slide Eventu.
slide: funkcija (dogodek, ui) var value = slider.slider ('vrednost'), tooltip.css ('left', value) .text (ui.value);
Vendar pa želimo, da se namig v začetku skrije.
tooltip.hide ();
Po tem, ko ročaj bo kmalu začel drseti, bo prikazan z učinkom pojemanja.
start: funkcija (dogodek, ui) tooltip.fadeIn ('hitro'); ,
In ko uporabnik preneha premikati ročico, se bo orodje izginilo in bo skrito.
stop: funkcija (dogodek, ui) tooltip.fadeOut ('hitro'); ,
Glasnost
Kot smo omenili zgoraj v. \ T Odsek Slogi, ikono glasnosti načrtujemo tako, da se ustrezno spremeni glede na položaj ročice ali natančno, vrednost drsnika. Za ustvarjanje tega učinka bomo uporabili naslednjo pogojno izjavo.
Najprej pa shranimo element volumna in vrednost drsnika kot spremenljivko.
volume = $ ('. volume');
Potem začnemo pogojno izjavo.
Če je vrednost drsnika nižja ali enaka 5 ikona za glasnost sploh ne bo imela nobenih vrstic, kar pomeni, da je glasnost zelo nizka, ko pa se vrednost drsnika poveča, se bo tudi vrstica glasnosti povečala,.
if (vrednost <= 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'); ;
Vse skupaj
V redu, če ste zmedeni z vsemi zgoraj navedenimi stvarmi, ne bodite. Tukaj je bližnjica. V svoj dokument vnesite vse naslednje kode.
Danes smo uspešno ustvarili elegantnejšo temo za uporabniški vmesnik jQuery, hkrati pa smo uspešno prevedli uporabniški vmesnik PSD v funkcionalni regulator glasnosti.
Upamo, da vas bo ta vadba navdihnila in vam pomagala razumeti, kako narediti PSD v bolj uporaben izdelek.
Nazadnje, če imate kakršnokoli vprašanje glede te vadnice, vas prosimo, da jo dodate v oddelku za komentarje spodaj.
