Jei esate nemokami medžiotojai, galite atsisiųsti daug PSD vartotojo sąsajų (UI). Kai kurie iš jų yra tikrai nuostabūs ir galėjo sutaupyti savo laiką prototipuodami dizainą, kuriame dirbame.
Šiame pranešime koduosime PSD UI ir paversime jį funkcionalesne. Mes ketiname koduoti šį PSD UI slankiklį, kuris bus naudojamas kaip jQuery UI Slider tema.
Tačiau, Prašome atkreipti dėmesį kad ši pamoka skirta vidutinio lygio patirties. Tai pasakiusi, vis dar gana paprasta sekti, kol esate gerai susipažinę su CSS ir jQuery.
Gerai, dabar pradėkime.
1 veiksmas: jQuery UI
Akivaizdu, kad mums reikia jQuery ir jQuery UI bibliotekos, ir mes turime dvi galimybes jas panaudoti. Pirma, mes galime tiesiogiai susieti jQuery ir jQuery UI iš sekančio CDN: „Google Ajax API CDN“, „Microsoft CDN“ ir „jQuery CDN“. Yra daug privalumų, jei naudojatės CDN failu, kai mes pateikiame svetainę internete.
Bet kadangi mes dirbame tik neprisijungę, naudosime antra vietoj to.
Atsisiunčiame ir pritaikome jQuery UI biblioteką iš oficialios atsisiuntimo puslapio. Kadangi mums reikia tik „Slider“ papildinio, mes pasirinksime tik Slider biblioteką kartu su priklausomybe ir paliekame kitus. Tokiu būdu mūsų naudojami failai bus daug plonesni ir gali įkelti greičiau. Po to susieti visas šias bibliotekas su HTML dokumentu, pageidautina puslapio apačioje arba prieš uždarant
žyma tiksli.
2 veiksmas: HTML žymėjimas
Slankiklio žymėjimas yra labai paprastas, mes supakavome visą reikalingą žymėjimą - įrankio įrankį, slankiklį ir tūrį - HTML5 viduje skyrius žyma. Tada jQuery UI automatiškai generuos likusią.
3 žingsnis: Įdiekite slankiklį UI
Toliau pateikiamas fragmentas puslapyje įdiegs slankiklį, tačiau jis taikomas tik numatytai konfigūracijai.
$ (funkcija () $ ("#slider") .slider (););
Taigi čia mes šiek tiek padidinsime slankiklį, pridedant kitas konfigūracijas.
Pirma, laikome slankiklio elementą kaip kintamąjį.
var slider = $ („# slider“),
Tada nustatėme minimalią numatytąją slankiklio reikšmę 35, kai jis pirmą kartą įkeliamas.
slider.slider (range: "min", vertė: 35,);
Šiuo metu naršyklėje dar nieko nematysime, nes jQuery UI yra iš esmės tik sukuriant žymėjimą. Taigi, norėdami vizualiai peržiūrėti rezultatą naršyklėje, turime taikyti kai kuriuos stilius.
4 žingsnis: stiliai
Prieš tęsdami, mums reikia šiek tiek PSD šaltinio failo, pvz., Fono tekstūros ir piktogramos.
Mes apie tai nekalbėsime kaip pjauti šiame straipsnyje mes tik sutelksime dėmesį į kodą. Jei nesate tikri, kaip supjaustyti, prieš tęsdami žiūrėti toliau pateiktą scenarijų.
Konstrukcijos konvertavimas iš PSD į HTML - Riešutai+
Gerai, dabar pradėkime stilių pridėjimą.
Pradėsime stumdami slankiklį į naršyklės lango centrą ir pridėsime foną, kurį mes išpjauta iš PSD į kūnas.
kūnas fonas: url ('… /images/bg.jpg') pakartokite kairę; sekcija plotis: 150px; aukštis: auto; paraštė: 100px auto 0; pozicija: santykinis;
Toliau taikysime stilius įrankį, apimtis, rankena, slankiklį diapazonas ir slankiklį pats.
Mes atliksime dalį dalies, pradedant nuo…
Slankiklis
Kadangi mes nenustatėme maksimalios vertės Slider'iui, jQuery UI taikys numatytąjį; tai yra 100. Todėl mes taip pat galime kreiptis 100 (px) slankikliui plotis.
Mes pakeitėme apimties piktogramą šiek tiek, kad atitiktų mūsų idėją. Idėja yra sukurti efektą palaipsniui pakelkite garsumo juostą pagal slankiklio vertę. Esu įsitikinęs, kad tokį poveikį dažnai matėte medijos leistuvo vartotojo sąsajoje.
Šiame etape pradėsime dirbti su „Slider“ specialiu efektu.
„Tooltip“
Šiuo metu įrankių rinkinys dar neturi turinio, todėl jį užpildysime slankiklio verte. Be to, įrankio taško horizontali padėtis atitiks rankenos padėtį.
Pirmiausia, mes išsaugome įrankio įrankio elementą kaip kintamąjį.
var tooltip = $ ('. tooltip');
Tada mes apibrėžiame įrankių kūrinio efektą, kurį jau minėjome skaidrių renginyje.
skaidrė: funkcija (įvykis, ui) var value = slider.slider ('value'), tooltip.css ('kairė', vertė) .text (ui.value);
Tačiau mes taip pat norime, kad įrankių patarimas būtų iš pradžių paslėptas.
tooltip.hide ();
Po to, kai rankena bus pradėta stumti, ji bus rodoma su išblukimu.
pradžia: funkcija (įvykis, ui) tooltip.fadeIn („greitai“); ,
Ir, kai vartotojas nustoja stumti rankenėlę, įrankių patarimas išnyks ir bus paslėptas.
stop: funkcija (įvykis, ui) tooltip.fadeOut („greitai“); ,
Tomas
Kaip minėjome pirmiau Stilių skiltis, mes planuojame apimties piktogramą atitinkamai pakeisti rankenos padėtį arba tiksliai, slankiklio reikšmė. Taigi, norėdami sukurti šį efektą, taikysime tokį sąlyginį pareiškimą.
Tačiau, pirma, mes išsaugome apimties elementą ir slankiklio vertę kaip kintamąjį.
apimtis = $ („. apimtis“);
Tada pradedame sąlyginį pareiškimą.
Kai slankiklio vertė yra mažesnė arba lygi 5 apimties piktograma apskritai neturi juostų, o tai reiškia, kad garsumas yra labai mažas, tačiau kai slankiklio vertė didėja, garsumo juosta pradės didėti..
jei (vertė <= 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'); ;
Įdėkite juos visus kartu
Gerai, jei jūs supainiotumėte su visomis pirmiau minėtomis medžiagomis, nebūk. Čia yra nuoroda. Įdėkite visus šiuos kodus į savo dokumentą.
Šiandien mes sėkmingai sukūrėme elegantiškesnę „JQuery“ vartotojo sąsajos temą, tačiau tuo pat metu sėkmingai išversti PSD vartotojo sąsają į funkcinį garso valdiklį.
Tikimės, kad ši pamoka įkvepia jus ir padės jums suprasti, kaip paversti PSD į labiau naudingą produktą.
Galiausiai, jei turite kokių nors klausimų apie šią pamoką, nedvejodami pridėkite jį žemiau esančiame komentarų skyriuje.
