Ja esat mednieku mednieks, iespējams, esat lejupielādējis daudz PSD lietotāja interfeisu (UI). Daži no tiem ir patiesi pārsteidzoši un var ietaupīt mūsu laiku, prototipējot dizainu, kuru mēs strādājām.
Šajā amatā mēs kodēsim PSD UI un pārvēršam to par vairāk funkcionālu. Mēs kodēsim šādu PSD UI slīdni, lai to izmantotu kā jQuery UI Slider tēmu.
Tomēr, lūdzu, ņemiet vērā ka šī apmācība ir paredzēta vidējā līmenī pieredzi. Tā teicis, ka tas joprojām ir salīdzinoši viegli sekojams, ja vien jūs esat diezgan pazīstams ar CSS un jQuery.
Labi, tagad sāksim.
1. solis: jQuery UI
Mums, protams, ir vajadzīga jQuery un jQuery UI bibliotēka, un mums ir divas iespējas tās izmantot. Pirmkārt, mēs varam saistīt jQuery un jQuery UI tieši no šāda CDN: Google Ajax API CDN, Microsoft CDN un jQuery CDN, tur ir daudz priekšrocību, izmantojot hostēto CDN failu, kad mēs ievietojam mūsu vietni tiešsaistē.
Bet tā kā mēs strādāsim pie tā bezsaistē, mēs izmantosim otrā tā vietā.
Lejupielādēsim un pielāgosim jQuery UI bibliotēku no oficiālās lejupielādes lapas. Tā kā mums ir nepieciešams tikai slīdņa spraudnis, mēs atlasīsim tikai slīdņa bibliotēku kopā ar tās atkarībām un atstāsim citus. Tādā veidā izmantotie faili būs daudz plānāki un var ielādēt ātrāk. Pēc tam savienojiet visas šīs bibliotēkas ar HTML dokumentu, vēlams lapas apakšdaļā vai pirms tās
atzīme ir precīza.
2. solis: HTML iezīmēšana
Slīdņa atzīme ir ļoti vienkārša, mēs iesaiņojām visu nepieciešamo atzīmi - rīku padomu, slīdni un apjomu - HTML5 iekšpusē sadaļā tag. Pēc tam jQuery UI automātiski ģenerēs pārējo.
3. solis. Instalējiet slīdņa UI
Zemāk esošajā fragmentā lapā tiks uzstādīts slīdnis, bet tas attiecas tikai uz noklusējuma konfigurāciju.
$ (funkcija () $ ("#slider") .slider (););
Tātad šeit mēs nedaudz palielināsim slīdni, pievienojot citas konfigurācijas.
Pirmkārt, mēs saglabājam slīdņa elementu kā mainīgo.
var slider = $ ('# slīdni'),
Tad mēs iestatām slīdņa minimālo noklusējuma vērtību 35, kad tas vispirms tiek ielādēts.
slider.slider (diapazons: "min", vērtība: 35,);
Šajā brīdī mēs vēl neko neredzēsim pārlūkprogrammā, jo ir jQuery UI galvenokārt radot atzīmi. Tāpēc, lai sāktu redzēt rezultātu vizuāli pārlūkprogrammā, ir jāpiemēro daži stili.
4. solis. Stili
Pirms turpināt, mums ir nepieciešami daži PSD avota faila līdzekļi, piemēram, fona struktūra un ikona.
Mēs nerunājam par to kā šķēle šajā rakstā mēs koncentrēsimies tikai uz kodu. Ja neesat pārliecināts, kā sagriezt šķēlīti, vispirms pirms turpināt skatīties sekojošo skrīningu.
Dizaina pārveidošana no PSD uz HTML - Netuts+
Labi, tagad sāksim pievienot stilus.
Mēs sāksim, novietojot slīdni pārlūkprogrammas loga centrā un pievienosim fonu, kas tika sagriezta no PSD uz ķermeni.
ķermeņa fons: url ('… /images/bg.jpg') atkārtojiet augšējo kreiso pusi; sekcija platums: 150px; augstums: auto; starpība: 100px auto 0; pozīcija: relatīvais;
Tālāk mēs piemērosim stilus rīku padoms, skaļumu, rokturi, slīdni diapazonā un slīdni pati.
Mēs to izdarīsim daļēji, sākot ar…
Slīdni
Tā kā mēs neesam definējuši paša Slīdņa maksimālo vērtību, jQuery UI piemēros noklusējumu; tas ir 100. Tāpēc mēs varam arī pieteikties 100 (px) slīdni platums.
Lai izpildītu mūsu ideju, mēs nedaudz mainījām apjoma ikonu. Ideja ir, ka mēs radīsim efektu palieliniet skaļuma joslu pakāpeniski atbilstoši slīdņa vērtībai. Esmu pārliecināts, ka jūs bieži redzējāt šādu efektu multimediju draivera lietotāja saskarnē.
Šajā solī mēs sāksim strādāt pie Slider īpašā efekta.
Tooltip
Šajā brīdī rīku padevei vēl nav satura, tāpēc mēs to aizpildīsim ar slīdņa vērtību. Arī rīka padeves horizontālais stāvoklis atbilst roktura pozīcijai.
Pirmkārt, mēs saglabājam rīku padeves elementu kā mainīgo.
var tooltip = $ ('. tooltip');
Tad mēs definējam rīku padoma efektu, ko mēs iepriekš minējām Slide Event ietvaros.
slaids: funkcija (notikums, ui) var value = slider.slider ('vērtība'), tooltip.css ('pa kreisi, vērtība) .text (ui.value);
Bet mēs arī vēlamies, lai rīku padoms būtu slēpts.
tooltip.hide ();
Pēc tam, kad rokturi gatavojas sākt bīdīšanu, tas tiks parādīts ar izbalēšanu.
sākums: funkcija (notikums, ui) tooltip.fadeIn ('fast'); ,
Un, kad lietotājs pārtrauc bīdīt rokturi, rīku padoms izzudīs un tiks paslēpts.
stop: funkcija (notikums, ui) tooltip.fadeOut ('fast'); ,
Apjoms
Kā mēs jau iepriekš minējām Sadaļa Stili, mēs plānojam skaļuma ikonu, lai attiecīgi mainītu roktura pozīciju vai precīzi, slīdņa vērtība. Tātad mēs izveidosim šādu nosacītu paziņojumu, lai izveidotu šo efektu.
Bet, pirmkārt, mēs saglabājam skaļuma elementu, kā arī slīdņa vērtību kā mainīgo.
tilpums = $ (“. tilpums”);
Tad mēs sākam nosacīto paziņojumu.
Kad slīdņa vērtība ir mazāka vai vienāda ar 5 skaļuma ikonai vispār nebūs joslu, kas norāda, ka skaļums ir ļoti zems, bet, palielinoties slīdņa vērtībai, skaļuma josla arī palielināsies.
ja (vērtība <= 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'); ;
Novietojiet tos visus kopā
Labi, ja jūs sajaukt ar visiem iepriekšminētajiem materiāliem, vai ne. Šeit ir saīsne. Ievietojiet visus šādus kodus savā dokumentā.
$ (funkcija () var slider = $ ('# slīdni'), rīku padoms = $ ('. tooltip'); tooltip.hide (); slider.slider (diapazons: "min", min: 1, vērtība: 35, start: funkcija (notikums, ui) tooltip.fadeIn ('fast');, slaids: funkcija (notikums, ui) var value = slider.slider ('vērtība'), tilpums = $ ('. '); tooltip.css (' pa kreisi, vērtība) .text (ui.value), ja (vērtība <= 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'); , ); );
Labi, tagad skatīsim rezultātu pārlūkprogrammā.
Demo
Lejupielādēt avotu
Secinājums
Šodien mēs esam veiksmīgi izveidojuši elegantāku jQuery UI tēmu, bet vienlaikus esam arī veiksmīgi pārtulkojuši PSD lietotāja interfeisu funkcionālā skaļuma kontrolierī..
Mēs ceram, ka šī apmācība iedvesmos jūs un palīdzēs jums saprast, kā PSD pārvērst par lietojamāku produktu.
Visbeidzot, ja jums ir kādi jautājumi par šo pamācību, lūdzu, pievienojiet to tālāk komentāru sadaļā.
