Helitugevuse regulaatori loomine koos jQuery UI liuguriga

Kui olete vabakutseliste jahimees, siis on tõenäoline, et olete alla laadinud palju PSD kasutajaliideseid (UI). Mõned neist on tõeliselt hämmastavad ja säästavad meie aega prototüüpides disaini, mida töötasime.

Selles postituses me koodime PSD kasutajaliidese ja muudame selle midagi funktsionaalsemaks. Kodeerime järgmise PSD UI Slideri, mida kasutatakse kui jQuery UI Slider teemat.

Kuid, Palun tehke märge et see õpetus on mõeldud kesktasemel kogemusi. Olles seda öelnud, on see ikka veel suhteliselt lihtne järgida, kui olete tuttav CSS ja jQueryga.

Olgu, nüüd alustame.

1. etapp: jQuery kasutajaliides

Me vajame ilmselt jQuery ja jQuery UI raamatukogu ning meil on kaks võimalust neid kasutada. Esiteks, me saame linkida jQuery ja jQuery UI otse järgmisest CDN-ist: Google Ajax API CDN, Microsoft CDN ja jQuery CDN, seal on palju eeliseid, kui kasutate hostitud CDN-faili, kui me oma veebilehe veebis reaalajas paneme.

Aga kuna me töötame selle kallal ainult offline, kasutame seda teine selle asemel.

Laadime alla ja kohandame jQuery UI raamatukogu ametlikust allalaadimislehest. Kuna meil on vaja ainult liugurit, valime koos selle sõltuvustega ainult liugurite raamatukogu ja jätame teised. Nii on meie kasutatavad failid palju õhemad ja kiiremini laaditavad. Seejärel ühendage kõik need teegid HTML-dokumendiga, eelistatavalt lehe allosas või enne sulgemist sild on täpne.

2. samm: HTML-märgistus

Liuguri märgistus on väga lihtne, me pakendasime kõik vajalikud märgistused - tööriista, liuguri ja köite - HTML5 sees lõik silt. Seejärel genereerib jQuery kasutajaliides automaatselt ülejäänud.

3. samm: paigaldage liuguri kasutajaliides

Allpool olev väljaanne paigaldab lehele liuguri, kuid kasutab ainult vaikimisi konfigureerimist.

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

Nii suurendame siin veidi liugurit, lisades teisi konfiguratsioone.

Esiteks salvestame liugurelemendi muutujana.

 var slider = $ ('# liugur'),

Seejärel määrasime libiseri minimaalse vaikeväärtuse 35, kui see on esmakordselt laaditud.

 slider.slider (vahemik: "min", väärtus: 35,);

Sel hetkel ei näe me brauseris veel midagi, sest jQuery kasutajaliides on põhiliselt ainult märgistuse genereerimine. Seega peame kasutama mõned stiilid tulemuse visuaalseks vaatamiseks brauseris.

4. samm: stiilid

Enne jätkamist vajame PSD lähtefailist mõningaid varasid, nagu näiteks tausta tekstuur ja ikoon.

Me ei räägi kuidas lõigata Käesolevas artiklis keskendume ainult koodile. Kui te ei ole kindel, kuidas lõigata, vaadake enne jätkamist järgmist skeemi.

Disaini teisendamine PSD-st HTML-ks - Pähklid+

Olgu, alustame nüüd stiilide lisamist.

Alustame liuguri paigutamisega brauseri akna keskele ja lisame taustal, mille me PSD-lt viilutatud on keha.

 keha taust: url ('… /images/bg.jpg') korrake ülemist vasakut;  sektsioon laius: 150 px; kõrgus: auto; marginaal: 100px auto 0; positsioon: suhteline;

Seejärel rakendame stiilid tööriista, maht, käepide, liugurit vahemikus ja liugurit ise.

Me teeme selle osa osaliselt, alustades…

Liugur

Kuna me ei määranud Slideri maksimaalset väärtust, rakendab jQuery UI vaikimisi; see on 100. Seetõttu võime ka taotleda 100 (px) liuguritele laius.

 #slider border-width: 1px; piiri-stiil: tahke; äärevärv: # 333 # 333 # 777 # 333; raadius: 25px; laius: 100 px; positsioon: absoluutne; kõrgus: 13 px; taustavärv: # 8e8d8d; taust: url ('… /images/bg-track.png') korrake ülemist vasakut; box-shadow: sisend 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); vasakule: 20tk;

Tooltip

Tooltip paikneb liuguri kohal, täpsustades selle absoluutselt koos -25tk selle eest ülemine positsioon.

 .tooltip positsioon: absoluutne; kuva: plokk; top: -25px; laius: 35px; kõrgus: 20 px; värv: #fff; teksti joondamine: keskus; font: 10pt Tahoma, Arial, sans-serif; raadius: 3x; piir: 1px tahke # 333; kasti vari: 1px 1px 2px 0px rgba (0, 0, 0, .3); kastide suurus: piirikast; taust: lineaarne gradient (ülemine, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);

Maht

Oleme oma idee täitmiseks veidi muutnud helitugevuse ikooni. Idee on see, et me loodame mõjusid tõstke helitugevuse riba järk-järgult vastavalt liuguri väärtusele. Olen kindel, et näete sellist mõju meediapleieri kasutajaliideses sageli.

 .maht kuva: inline-block; laius: 25 px; kõrgus: 25 px; paremale: -5px; taust: url ('… /images/volume.png') ei korrata 0 -50px; positsioon: absoluutne; margin-top: -5px;

UI käepide

Käepideme stiil on üsna lihtne; sellel on ikoon, mis näeb välja nagu metallring, mis on lõigatud PSD-st ja kinnitatud taustana.

Samuti muudame kursori režiimi pointer, nii märkab kasutaja, et see element on lohistatav.

 .ui-liugur-käepide asend: absoluutne; z-indeks: 2; laius: 25 px; kõrgus: 25 px; kursor: pointer; taust: url ('… /images/handle.png') ei korrata 50% 50%; fondi kaal: rasvane; värv: # 1C94C4; ülevaade: mitte; top: -7px; margin-left: -12px;

Liuguri ulatus

Liugurite vahemik on veidi valge.

 .ui-slider-range background: lineaarne gradient (ülemine, #ffffff 0%, # eaeaea 100%); positsioon: absoluutne; piir: 0; top: 0; kõrgus: 100%; raadius: 25px;

5. samm: efekt

Selles etapis hakkame töötama Slideri eriefektiga.

Tooltip

Praegusel hetkel ei ole tööriista veel sisu, nii et me täidame selle liuguri väärtusega. Samuti vastab tööriista horisontaalne asend käepideme asendile.

Esiteks salvestame tööriista elementi muutujana.

 var tooltip = $ ('. tooltip');

Siis me defineerime tööriista efekti, mida me oleme ülalmainitud slaidisündmuse sees.

 slaid: funktsioon (sündmus, ui) var value = slider.slider ('väärtus'), tooltip.css ('vasakpoolne, väärtus) .tekst (ui.value);

Kuid me tahame ka, et töövihik peituks algul.

 tooltip.hide ();

Pärast seda, kui käepide hakkab libistama, näidatakse seda fade-in-efektiga.

 start: funktsioon (sündmus, ui) tooltip.fadeIn ('kiire'); ,

Ja kui kasutaja peatab käepideme libistamise, kaob tööriista välja ja peitub.

 stop: funktsioon (sündmus, ui) tooltip.fadeOut ('kiire'); ,

Maht

Nagu me eespool mainisime Stiili jaotis, planeerime helitugevuse ikooni, et vastavalt muuta käepideme asendit või olla täpne, liuguri väärtus. Niisiis rakendame selle efekti loomiseks järgmist tingimuslikku avaldust.

Esiteks, me salvestame helitugevuse elemendi ja liuguri väärtuse muutujana.

 maht = $ (". maht");

Seejärel alustame tingimuslikku avaldust.

Kui liuguri väärtus on väiksem või võrdne 5 helitugevuse ikoonil ei ole üldse ribasid, mis näitab, et helitugevus on väga väike, kuid kui liuguri väärtus suureneb, hakkab ka helitugevusriba suurenema.

 kui (väärtus <= 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'); ;

Pane need kõik kokku

Olgu, kui sa segaduses kõigi ülaltoodud asjadega, ära ole. Siin on otsetee. Pange kõik järgmised koodid oma dokumenti.

 $ (funktsioon () var slider = $ ('# liugur'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (vahemik: "min", min: 1, väärtus: 35, start: funktsioon (sündmus, ui) tooltip.fadeIn ('kiire');, slaid: funktsioon (sündmus, ui) var value = slider.slider ('väärtus'), maht = $ ('. Maht '); tooltip.css (' vasakpoolne, väärtus) .text (ui.value), kui (väärtus <= 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'); , ); );

Olgu, vaatame nüüd tulemuse brauseris.

Demo
Allalaadimise allikas

Järeldus

Täna oleme edukalt loonud elegantsema jQuery kasutajaliidese teema, kuid samal ajal oleme edukalt tõlkinud PSD kasutajaliidese funktsionaalse helitugevuse regulaatoriks.

Loodame, et see juhendaja inspireerib sind ja aitab teil mõista, kuidas PSD muutuda kasutatavamaks tooteks.

Lõpuks, kui teil on selle õpetusega seotud küsimusi, lisage see allpool olevasse märkuste jaotisse.