Äänenvoimakkuussäätimen luominen jQuery UI -liukusäätimellä

Jos olet freebies-metsästäjä, olet todennäköisesti ladannut paljon PSD-käyttöliittymiä (UI). Jotkut niistä ovat todella hämmästyttäviä ja voisivat säästää aikamme prototyyppimalla suunnittelemamme mallin.

Tässä viestissä koodataan PSD-käyttöliittymä ja muutamme se toiminnallisemmaksi. Aiomme koodata seuraavan PSD UI -liukusäätimen, jota käytetään jQuery UI Slider -teemana.

kuitenkin, ota huomioon, ole hyvä että tämä opetusohjelma on tarkoitettu välitasolla kokemusta. Tämän sanottuaan se on edelleen melko helppo seurata, kunhan olet varsin tuttu CSS ja jQuery.

No niin, nyt aloitetaan.

Vaihe 1: jQuery-käyttöliittymä

Tarvitsemme tietysti jQueryn ja jQuery UI -kirjaston, ja meillä on kaksi mahdollisuutta käyttää niitä. Ensinnäkin voimme yhdistää jQueryn ja jQuery UI: n suoraan seuraavasta CDN: stä: Google Ajax API CDN, Microsoft CDN ja jQuery CDN, siellä on paljon etuja, kun käytät isäntä-CDN-tiedostoa, kun asetamme sivustomme verkossa.

Mutta koska työskentelemme vain sen kanssa offline-tilassa, käytämme sitä toinen tavalla.

Lataamme ja mukautamme jQuery UI -kirjaston virallisesta lataussivulta. Koska tarvitsemme vain Slider-laajennusta, valitsemme vain Slider-kirjaston ja sen riippuvuudet ja jätetään muut. Näin käytettävät tiedostot ovat paljon ohuempia ja ne voidaan ladata nopeammin. Tämän jälkeen linkitä kaikki nämä kirjastot HTML-dokumenttiin, mieluiten sivun alareunassa tai ennen läheltä tunniste on tarkka.

Vaihe 2: HTML-merkintä

Liukusäätimen merkintä on hyvin yksinkertainen, me käärimme kaikki tarvittavat merkinnät - työkaluvihje, liukusäädin ja määrä - HTML5: n sisällä jakso tag. JQuery-käyttöliittymä luo sitten loput automaattisesti.

Vaihe 3: Asenna liukusäätimen käyttöliittymä

Alla oleva fragmentti asentaa Sliderin sivulle, mutta se käyttää vain oletusasetuksia.

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

Joten tässä parannamme liukusäädintä hieman lisäämällä muita kokoonpanoja.

Ensinnäkin tallennamme liukusäätimen elementin muuttujaksi.

 var slider = $ ('# liukusäädin'), 

Sitten asetimme liukusäätimen vähimmäisarvoarvon olevan noin 35, kun se on ensin ladattu.

 slider.slider (range: "min", arvo: 35,); 

Tässä vaiheessa emme näe mitään selaimessa vielä, koska jQuery UI on periaatteessa vain merkinnän tuottaminen. Joten meidän on sovellettava joitakin tyylejä aloittaaksesi tuloksen näkemisen visuaalisesti selaimessa.

Vaihe 4: Tyylit

Ennen kuin jatkat, tarvitsemme PSD-lähdetiedostosta joitakin varoja, kuten taustakuvioita ja kuvaketta.

Emme puhu miten siivu Tässä artikkelissa keskitymme vain koodiin. Jos et ole varma, kuinka leikkaa, katso ensin seuraavaa skenaattoria ennen kuin jatkat.

• Suunnittelun muuntaminen PSD: stä HTML: ksi - Nettuts+

Hyvä on, nyt aloitetaan lisäämällä tyylit.

Aloitamme sijoittamalla liukusäädintä selaimen ikkunan keskelle ja liittämällä taustan, jonka olimme viipaloitu PSD: stä ruumis.

 keho tausta: url ('… /images/bg.jpg') toista ylhäällä vasemmalla;  osa leveys: 150px; korkeus: auto; marginaali: 100px auto 0; asema: suhteellinen;  

Seuraavaksi sovellamme tyylit työkaluvihje, äänenvoimakkuutta, kahva, liukusäädintä alue ja liukusäädintä itse.

Teemme tämän osan osittain, alkaen…

Slider

Koska emme määrittäneet itse Sliderin enimmäisarvoa, jQuery UI soveltaa oletusarvoa; tuo on 100. Siksi voimme myös soveltaa 100 (px) liukusäätimille leveys.

 #slider border-width: 1px; raja-tyyli: kiinteä; raja-väri: # 333 # 333 # 777 # 333; raja-säde: 25px; leveys: 100px; asema: absoluuttinen; korkeus: 13px; taustaväri: # 8e8d8d; tausta: url ('… /images/bg-track.png') toista ylhäällä vasemmalla; laatikko-varjo: upotettu 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); vasen: 20px;  

tooltip

Tooltip sijoitetaan liukusäätimen yläpuolelle määrittämällä sen ehdottomasti kanssa -25 kuvapistettä sen puolesta yläasento.

 .tooltip sijainti: absoluuttinen; näyttö: lohko; alkuun: -25px; leveys: 35px; korkeus: 20px; väri: #fff; text-align: center; fontti: 10pt Tahoma, Arial, sans-serif; raja-säde: 3px; raja: 1px kiinteä # 333; laatikko-varjo: 1px 1px 2px 0px rgba (0, 0, 0, .3); laatikon koko: raja-laatikko; tausta: lineaarinen gradientti (alkuun, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);  

tilavuus

Olemme muuttaneet äänenvoimakkuuden kuvaketta hieman vastaamaan ideaamme. Ajatuksena on, että aiomme luoda vaikutuksen nosta äänenvoimakkuuspalkkia asteittain liukusäätimen arvon mukaisesti. Olen varma, että olet usein nähnyt tällaisen vaikutuksen mediasoittimen käyttöliittymässä.

 .äänenvoimakkuus näyttö: inline-block; leveys: 25px; korkeus: 25px; oikea: -5px; tausta: url ('… /images/volume.png') ei-toista 0 -50px; asema: absoluuttinen; margin-top: -5px;  

UI-kahva

Kahvan tyyli on melko yksinkertainen; sillä on kuvake, joka näyttää metalliselta ympyrältä, joka on leikattu PSD: stä ja liitetty taustaksi.

Muutamme myös kohdistimen tilaksi osoitin, joten käyttäjä huomaa, että tämä elementti on vetovoima.

 .ui-liukusäädin-kahva sijainti: absoluuttinen; z-indeksi: 2; leveys: 25px; korkeus: 25px; kohdistin: osoitin; tausta: url ('… /images/handle.png') ei-toista 50% 50%; font-paino: lihavoitu; väri: # 1C94C4; ääriviivat: ei; alkuun: -7px; margin-left: -12px;  

Slider Range

Liukusäätimellä on hieman valkoista kaltevuusväriä.

 .ui-slider-range tausta: lineaarinen gradientti (alkuun, #ffffff 0%, # eaeaea 100%); asema: absoluuttinen; raja: 0; alkuun: 0; korkeus: 100%; raja-säde: 25px;  

Vaihe 5: Vaikutus

Tässä vaiheessa alamme työskennellä Sliderin erikoisvaikutuksella.

tooltip

Tässä vaiheessa työkaluvihjeellä ei ole vielä sisältöä, joten aiomme täyttää sen liukusäätimen arvolla. Työkalupiikin vaaka-asento vastaa myös kahvan sijaintia.

Ensinnäkin tallennamme työkaluvihje-elementin muuttujaksi.

 var tooltip = $ ('. tooltip'); 

Sitten määrittelemme edellä mainitun työkalutyypin vaikutuksen Slide Eventissä.

 dia: toiminto (tapahtuma, ui) var value = slider.slider ('arvo'), tooltip.css ('vasen', arvo) .teksti (ui.value); 

Mutta haluamme myös, että työkaluvihje piilotetaan.

 tooltip.hide (); 

Sen jälkeen, kun käsitellä on alkamassa liukua, se näkyy häipymällä.

 start: toiminto (tapahtuma, ui) tooltip.fadeIn ('fast'); , 

Ja kun käyttäjä lopettaa kahvan liukumisen, työkaluvihje lakkaa ja piilotetaan.

 stop: toiminto (tapahtuma, ui) tooltip.fadeOut ('fast'); , 

tilavuus

Kuten edellä mainitsimme Tyylit-osio, Suunnittelemme äänenvoimakkuuden kuvakkeen muuttaaksesi vastaavasti kahvan sijaintia tai tarkkuutta, liukusäätimen arvo. Niinpä käytämme seuraavaa ehdollista lausuntoa tämän vaikutuksen luomiseksi.

Ensinnäkin tallennamme äänenvoimakkuuselementin ja liukusäätimen arvon muuttujana.

 tilavuus = $ (". tilavuus"); 

Sitten aloitamme ehdollisen lausunnon.

Kun liukusäätimen arvo on pienempi tai yhtä suuri kuin 5 äänenvoimakkuuden kuvakkeessa ei ole yhtään palkkia, mikä osoittaa, että äänenvoimakkuus on hyvin alhainen, mutta kun liukusäätimen arvo kasvaa, äänenvoimakkuuspalkki alkaa kasvaa myös.

 jos (arvo <= 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'); ; 

Laita ne kaikki yhteen

Okei, jos olet sekaisin kaikkien edellä mainittujen juttujen kanssa, älä ole. Tässä on pikakuvake. Aseta kaikki seuraavat koodit asiakirjaan.

 $ (toiminto () var slider = $ ('# liukusäädin'), tooltip = $ ('. tooltip'); tooltip.hide (); slider.slider (alue: "min", min: 1, arvo: 35, start: toiminto (tapahtuma, ui) tooltip.fadeIn ('fast');, slide: toiminto (tapahtuma, ui) var value = slider.slider ('arvo'), tilavuus = $ ('. '); tooltip.css (' vasen ', arvo) .teksti (ui.value), jos (arvo <= 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'); , ); ); 

Hyvä on, katsotaan nyt tulos selaimessa.

• esittely
• Lataa lähde

johtopäätös

Tänään olemme onnistuneesti luoneet tyylikkäämän jQuery UI -teeman, mutta samanaikaisesti olemme kääntäneet PSD-käyttöliittymän onnistuneesti myös toiminnalliseksi äänenvoimakkuuden ohjaimeksi.

Toivomme, että tämä opetusohjelma inspiroi sinua ja voi auttaa sinua ymmärtämään, miten PSD: stä voidaan tehdä käyttökelpoisempi tuote.

Lopuksi, jos sinulla on kysyttävää tästä opetusohjelmasta, voit lisätä sen seuraaviin kommenttien osaan.