Kaip pritaikyti ir pritaikyti jQuery UI duomenų rinkiklį

jQuery UI yra tiesiog nuostabus ir dėl patogumo, jis yra populiarus ir plačiai naudojamas beveik visose svetainėse, kurioms reikia interaktyvių funkcijų.

Be to, šiame pranešime mes peržiūrėsime vieną iš pateiktų funkcijų - „Datepicker“ valdiklį.

Mes stengsimės sužinoti, kaip pritaikyti kalendoriaus temą, kad galėtumėte sukurti savo temą, atitinkančią jūsų bendrą dizainą. Tačiau jums reikia šiek tiek suprasti „JavaScript“ ir susipažinti su CSS, prieš atlikdami šią pamoką.

• Demo
• Atsisiųsti šaltinį

Jei esate pasiruošę, pradėkime.

Turtas

Paruoškime kai kuriuos svarbiausius kalendoriaus turtus.

Pirma, kalendoriaus dizainas bus susijęs su šiuo PSD failu iš „Premium Pixels“. Taigi mes geriau jį parsisiųsime pirmiausia, kad padėtų mums paimti reikiamų spalvų pavyzdį. Tada atsisiųskite du modelius iš Subtilus Raštai kad mes naudosime kaip kalendoriaus foną. Šiame pavyzdyje nusprendėme naudoti šiuos modelius: juodą džinsą ir tamsią odą.

Mums taip pat reikės žiniatinklio kūrimo įrankio, pvz., „Firebug“, kad patikrintume elementų klases / ID, generuojamus jQuery UI.

Na, manau, kad turime pakankamai pasirengimo. Dabar eikime į pirmąjį žingsnį.

1 žingsnis: jQuery UI duomenų rinkiklis

Pirma, eikite į jQuery UI atsisiuntimo puslapį. Šiame puslapyje bus pateikti keli variantai: vartotojo sąsajos pagrindai, valdikliai, sąveika ir efektai.

Mes turėtume panaikinkite visų komponentų pasirinkimą, nes mums jų nereikia.

Tada, Valdikliai skyriuje pasirinkite tik duomenų rinkiklį. JQuery UI automatiškai pasirinks pagrindines priklausomybes ir tada parsisiųsti failas.

Susieti visus atsisiųstus failus - išskyrus CSS - į HTML tuščią dokumentą:

2 veiksmas: duomenų rinkiklio pritaikymas

Šiame etape konfigūruosime duomenų rinkiklį naudodami šias parinktis.

Minėtas kodas nurodys jQuery rodyti kalendoriaus elementą su duomenų rinkiklis ID. Taigi, mums reikia pateikti šiuos dalykus div žyma su „datepicker ID“ - kūno skyriuje, kad sudarytumėte kalendorių:

Dabar kalendorius turėjo būti sukurtas ir toks, kaip bebūtų, be jokių stilių, bet vis tiek turi funkcionalumą.

3 žingsnis: stiliai

Dabar pradėkime kalendoriaus dizainą. Pradėsime normalizuodami visus elementus - kaip įprasta - ir sukurdami naują stilių lentelę, šiame pavyzdyje jį pavadinsiu datepicker.css. Tada susieti juos su HTML dokumentu.

Tada pirmiausia prie kūno pridėsime foną, kad mūsų HTML nebūtų pernelyg paprastas.

kūnas fonas: url ('… /img/darkdenim3.png') pakartokite 0 0 # 555; 

Toliau nurodysime duomenų rinkėjo plotį, pastatysime jį į centrą ir pridėsime šešėlį, kad būtų suteiktas reklamos efektas kalendoriui.

.ui-datepicker plotis: 216px; aukštis: auto; paraštė: 5px auto 0; šriftas: 9pt Arial, sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); dėžutės šešėlis: 0px 0px 10px 0px rgba (0, 0, 0, .5); 

Taip pat pašalinsime numatytąjį pabraukimo apdailą iš kiekvieno ankerinio žyma.

.ui-datepicker a text-decoration: nėra; 

JQuery UI kalendorius suformuojamas su a lentelė. Taigi, pridėkime 100% plotis lentelė, todėl jis turi tokį patį maksimalų plotį, kaip ir viršutinis; tai yra 216px

.ui-datepicker lentelė plotis: 100%; 

Antraštės skyriaus stilius

Duomenų rinkiklyje yra antraštė, kurioje yra Mėnuo ir metai kalendoriaus. Šiame skyriuje bus tamsios odos tekstūra, kurią anksčiau parsisiuntėte su šiek tiek balta šrifto spalva ir 1px baltas šešėlis viršuje.

.ui-datepicker-header background: url ('… /img/dark_leather.png') pakartokite 0 0 000; spalva: # e0e0e0; šrifto svoris: paryškintas; -webkit-box-shadow: įdėklas 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: įdėklas 0px 1px 1px 0px rgba (250, 250, 250, .2); dėžutės šešėlis: įdėklas 0px 1px 1px 0px rgba (250, 250, 250, .2); teksto šešėlis: 1px -1px 0px # 000; filtras: dropshadow (spalva = # 000, offx = 1, pašalinis = -1); linijos aukštis: 30px; sienos plotis: 1px 0 0 0; sienos stilius: kietas; sienos spalva: # 111; 

Tada centruokite Mėnuo poziciją.

 .ui-datepicker-title text-align: centre; 

Pakeiskite Kitas ir Ankstesnis tekstą su sprite rodyklėmis, kurios buvo supjaustytos iš PSD.

.ui-datepicker-prev, .ui-datepicker-next display: inline-block; plotis: 30px; aukštis: 30px; teksto derinimas: centras; žymeklis: žymeklis; fono paveikslėlis: url ('… /img/arrow.png'); fono kartojimas: ne kartoti; linijos aukštis: 600%; perteklius paslėptas; 

Tada sureguliuokite rodyklės padėtį.

.ui-datepicker-prev float: kairėje; fono padėtis: centras -30px;  .ui-datepicker-next float: right; fono padėtis: centras 0px; 

Kol dienos pavadinimai skyrius yra suvyniotas į Thead, remiantis mūsų dizaino nuoroda, jis bus šiek tiek baltas. Ir, norėdami supaprastinti mūsų užduotį, naudosime šį įrankį gradiento kodo generavimui:

.ui-datepicker thead fono spalva: # f7f7f7; fono vaizdas: -moz-linijinis gradientas (viršuje, # f7f7f7 0%, # f1f1f1 100%); fono paveikslėlis: -webkit-gradientas (linijinis, kairysis viršuje, kairėje apačioje, spalvų sustojimas (0%, # f7f7f7), spalvų sustojimas (100%, # f1f1f1)); fono vaizdas: -webkit-linijinis gradientas (viršuje, # f7f7f7 0%, # f1f1f1 100%); fono vaizdas: -o-linijinis gradientas (viršuje, # f7f7f7 0%, # f1f1f1 100%); fono vaizdas: -ms-linijinis gradientas (viršuje, # f7f7f7 0%, # f1f1f1 100%); fono vaizdas: tiesinis gradientas (viršutinis, # f7f7f7 0%, # f1f1f1 100%); filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); apačioje: 1px kietas #bbb; 

The dienos pavadinimai teksto tamsiai pilka spalva # 666666 ir jie taip pat turės ploną baltą teksto šešėlis suteikti jai spaudimą.

.ui-datepicker th text-transform: didžiosios; šrifto dydis: 6pt; įdėklas: 5px 0; spalva: # 666666; teksto šešėlis: 1px 0px 0px #fff; filtras: dropshadow (color = # fff, offx = 1, offy = 0); 

Šiuo metu kalendorius bus toks:

Datos formavimas

Kalendoriaus datos yra supakuotos td arba lentelės duomenis. Taigi, mes nustatysime padding 0 pašalinti tarpas tarp td ir suteikite jam dešiniąją 1px ribą.

.ui-datepicker tbody td padding: 0; dešinė pusė: 1px kietas #bbb; 

Išskyrus paskutinį td, kuri neturės tinkamos sienos. Šiam tikslui mes nustatėme dešinę 0 ribą.

.ui-datepicker tbody td: paskutinis vaikas dešinėje: 0px; 

Lentelės eilutė bus beveik tokia pati. Ji turės 1px sienos apačioje, išskyrus paskutinę eilutę.

.ui-datepicker tbody tr apačioje: 1px kietas #bbb;  .ui-datepicker tbody tr: paskutinis vaikas apačioje: 0px; 

Numatytojo, Hover ir Aktyviosios valstybės stiliaus kūrimas

Šiame etape nustatysime datą ir aktyvius stilius. Pirmiausia nustatysime numatytąjį datą, nurodydami matmenį; centruokite datos teksto poziciją, pridėkite gradiento spalvą ir vidinį baltą šešėlį.

.ui-datepicker td span, .ui-datepicker td a ekranas: inline-block; šrifto svoris: paryškintas; teksto derinimas: centras; plotis: 30px; aukštis: 30px; linijos aukštis: 30px; spalva: # 666666; teksto šešėlis: 1px 1px 0px #fff; filtras: dropshadow (color = # fff, offx = 1, offy = 1);  .ui-datepicker-calendar .ui-state-default fonas: #ededed; fonas: -moz-linijinis gradientas (viršutinis, #ededed 0%, #dedede 100%); fonas: -webkit-gradientas (linijinis, kairysis viršuje, kairėje apačioje, spalvų sustojimas (0%, # apvadas), spalvų sustojimas (100%, # dedede)); fonas: -webkit-linijinis gradientas (viršuje, #ededed 0%, # dedede 100%); fonas: -o-linijinis gradientas (viršutinis, #ededed 0%, # dedede 100%); fonas: -ms-linijinis gradientas (viršuje, #ededed 0%, # dedede 100%); fonas: tiesinis gradientas (viršutinis, #ededed 0%, # dedede 100%); filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: įterpti 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: įdėklas 1px 1px 0px 0px rgba (250, 250, 250, .5); dėžutės šešėlis: įdėklas 1px 1px 0px 0px rgba (250, 250, 250, .5);  .ui-datepicker-unselectable .ui-state-default fonas: # f4f4f4; spalva: # b4b3b3; 

Kai pasislinksite per datą, jis bus šiek tiek baltas.

 .ui-datepicker-calendar .ui-state-hover fonas: # f7f7f7; 

Kai data yra aktyvioje būsenoje, ji turės šiuos stilius.

 .ui-datepicker-calendar .ui-state-active fonas: # 6eafbf; -webkit-box-shadow: įdėklas 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: įdėklas 0px 0px 10px 0px rgba (0, 0, 0, .1); dėžutės šešėlis: įdėklas 0px 0px 10px 0px rgba (0, 0, 0, .1); spalva: # e0e0e0; teksto šešėlis: 0px 1px 0px # 4d7a85; filtras: dropshadow (spalva = # 4d7a85, offx = 0, nešvarumai = 1); siena: 1px kietas # 55838f; pozicija: santykinis; marža: -1px; 

Dabar kalendorius turėtų atrodyti daug geriau.

Pozicijos nustatymas

Šiuo metu atidžiai peržiūrėkite datą. Kai spustelėsite datą pirmame arba paskutiniame stulpelyje, pastebėsite, kad aktyvi būsena per kalendoriaus kraštą perpildyta pikseliu.

Taigi, mes atliksime keletą mažų pataisų.

Pirmiausia sumažinsime datos plotį iki 29px, ir nustatykite dešiniosios stulpelio dešinę paraštę ir kairiojo krašto kairę 0 pakeisti -1px ribą, kurią anksčiau nustatėte aktyviai būsenai.

.ui-datepicker-calendar td: pirmojo vaiko .ui-state-active plotis: 29px; margin-left: 0;  .ui-datepicker-calendar td: paskutinio vaiko .ui-state-active plotis: 29px; paraštė dešinėje: 0;  

Paskutinės kalendoriaus eilutės data taip pat bus panaši.

.ui-datepicker-calendar tr: paskutinio vaiko .ui-state-active height: 29px; paraštės apačia: 0; 

Dabar pažiūrėkime rezultatą. Na, kalendorius dabar atrodo gražus ir puikiai tinka kaip mūsų dizaino nuoroda. Be to, galite matyti demonstraciją ir atsisiųsti šaltinį, kad patikrintumėte kodą iš nuorodų, esančių po vaizdu.

• Demo
• Atsisiųsti šaltinį

Premija: išplėsti kalendorių

Na, šiandien mes daug išmokome apie tai, kaip sukurti pasirinktinę temą jQuery UI duomenų rinkėjui. Tačiau čia neturėtumėte sustoti, nes vis dar yra daug dalykų, kuriuos galima išplėsti nuo šio duomenų rinkimo. Priklausomai nuo jūsų „jQuery“ ir „CSS“ įgūdžių, pratęsite kalendorių, kad tai būtų - teksto įvedimas su perdangos duomenų rinkikliu.

• Demo
• Atsisiųsti šaltinį

Papildoma literatūra

Daugiau skaitymo apie jQuery UI. Čia galite skaityti visą dokumentaciją:

• Darbo pradžia su jQuery UI
• „Theming jQUery“ naudotojo sąsaja
• jQuery UI: Theming API klasės

Galutinės mintys

Dėkojame, kad perskaitėte ir sekėte šią pamoką, tikiuosi, kad tai naudinga. Ir, jei turite kokių nors atsiliepimų arba norėtumėte pridėti dalykų, kurie gali būti trūkstami iš šio vadovo, nedvejodami nurodykite jį toliau pateiktame komentarų skyriuje. Ačiū dar kartą).