Kā pielāgot un lietot jQuery UI Datepicker
jQuery UI ir vienkārši laba, un lietošanas ērtuma dēļ tas ir populārs un plaši izmantots gandrīz jebkurā tīmekļa vietnē, kur nepieciešama interaktīva funkcija..
Un šajā ziņojumā mēs aplūkosim vienu no piedāvātajām funkcijām, datplicker widget.
Mēs centīsimies uzzināt, kā pielāgot kalendāra tēmu, lai jūs varētu izveidot savu tēmu, kas atbilst jūsu vispārējam dizainam. Tomēr jums ir nepieciešams mazliet izpratne par JavaScript un iepazīt CSS pirms šīs apmācības.
- Demo
- Lejupielādēt avotu
Ja esat gatavs, sāciet darbu.
Aktīvi
Sagatavosim dažus svarīgākos kalendāra aktīvus.
Pirmkārt, kalendāra dizains attiecas uz šo PSD failu no Premium Pixels. Tāpēc mēs labāk to vispirms lejupielādēsim, lai palīdzētu mums veikt vajadzīgo krāsu paraugu. Tad lejupielādējiet divus modeļus no Smalks Raksti mēs izmantosim kā kalendāra fonu. Šajā piemērā mēs nolēmām izmantot šādus modeļus: melnā džinsa un tumšā āda.
Mums būs vajadzīgs arī tīmekļa izstrādes rīks, piemēram, Firebug, lai pārbaudītu elementu klases / ID, ko ģenerē jQuery UI.
Es domāju, ka mums ir pietiekami daudz sagatavošanās. Tagad dodieties uz pirmo soli.
1. solis: jQuery UI datu kopētājs
Pirmkārt, dodieties uz jQuery UI lejupielādes lapu. Šajā lapā jums tiks piedāvātas dažas iespējas, kā norādīts tālāk; UI kodols, logrīki, mijiedarbība un efekti.
Mums vajadzētu atceliet visu komponentu atlasi, jo mums tie nav vajadzīgi.
Tad Logrīki sadaļā izvēlieties tikai datepicker. JQuery UI automātiski atlasīs būtiskās atkarības un pēc tam lejupielāde fails.
Saistiet visus lejupielādētos failus - izņemot CSS - jūsu HTML tukšu dokumentu:
2. solis: Datepicker pielāgošana
Šajā solī mēs konfigurēsim datplicker ar šādām opcijām.
Minētais kods norādīs jQuery, lai parādītu kalendāru ar elementu ar datepicker ID. Tātad, mums ir jārīkojas šādi div tagu ar - datepicker ID - ķermeņa sadaļā, lai izveidotu kalendāru:
Tagad kalendāram vajadzētu būt jau ģenerētam, un tas parādās kā līdzīgs, bez jebkādiem stiliem, bet joprojām ir funkcionalitāte.
3. solis. Stili
Tagad sāksim veidot kalendāru. Mēs sāksim, normalizējot visus elementus - kā parasti - un izveidojot jaunu stilu, šajā piemērā to nosaucu datepicker.css. Pēc tam savienojiet tos ar HTML dokumentu.
Tad mēs vispirms pievienosim ķermenim fonu, lai mūsu HTML nešķiet pārāk vienkāršs.
ķermenis fons: url ('… /img/darkdenim3.png') atkārto 0 0 # 555; Tālāk mēs norādīsim datepicker platumu, novietosim to uz centru un pievienosim pilienveida ēnu, lai kalendāra reklāmai piešķirtu efektu.
.ui-datepicker platums: 216px; augstums: auto; starpība: 5px auto 0; fonts: 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); kastes ēna: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Mēs noņemsim arī noklusējuma pasvītrojuma dekorāciju no katra enkura taga.
.ui-datepicker a text-decoration: nav;
JQuery UI kalendārs tiek veidots ar a tabula. Tātad, pieņemsim pievienot 100% platums tabula, tā tas būs tāds pats maksimālais platums kā iepriekš minētajam iesaiņojumam; tas ir 216px
.ui-datepicker tabula platums: 100%;
Virsraksta sadaļas veidošana
Datepicker ir galvenes sadaļa, kas satur Mēnesis gads kalendāra. Šajā sadaļā būs tumšās ādas struktūra, kuru iepriekš lejupielādējāt ar nedaudz baltu fonta krāsu un 1px balta ēna augšpusē.
.ui-datepicker-header background: url ('… /img/dark_leather.png') atkārtojiet 0 0 000; krāsa: # e0e0e0; font-weight: bold; -webkit-box-shadow: ieliktnis 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: ieliktnis 0px 1px 1px 0px rgba (250, 250, 250, .2); box-shadow: ieliktnis 0px 1px 1px 0px rgba (250, 250, 250, .2); teksta ēna: 1px -1px 0px # 000; filtrs: dropshadow (krāsa = # 000, offx = 1, offy = -1); līnijas augstums: 30px; robežu platums: 1px 0 0 0; robežu stils: ciets; rāmja krāsa: # 111; Tālāk centīsimies Mēnesis pozīciju.
.ui-datepicker-title text-align: center;
Nomainiet Nākamais un Iepriekš teksts ar sprite bultiņu attēliem, kas sagriezti no PSD.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; platums: 30px; augstums: 30px; teksta saskaņošana: centrs; kursors: rādītājs; fona attēls: url ('… /img/arrow.png'); fona atkārtošana: nav atkārtota; līnijas augstums: 600%; pārplūde: slēpta; Pēc tam attiecīgi noregulējiet bultiņas pozīciju.
.ui-datepicker-prev float: pa kreisi; fona pozīcija: centrs -30px; .ui-datepicker-next float: right; fona pozīcija: centrs 0px;
Kamēr dienu nosaukumi sadaļa ir iesaiņota a rīt, pamatojoties uz mūsu dizaina atsauci, tam būs nedaudz balts gradients. Un, lai vienkāršotu mūsu uzdevumu, mēs šo rīku izmantosim, lai ģenerētu gradienta kodu:
.ui-datepicker thead fona krāsa: # f7f7f7; fona attēls: -moz-lineārs gradients (augšā, # f7f7f7 0%, # f1f1f1 100%); fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0%, # f7f7f7), krāsu apstāšanās (100%, # f1f1f1)); fona attēls: -webkit-lineārs gradients (augšā, # f7f7f7 0%, # f1f1f1 100%); fona attēls: -o-lineārs gradients (augšā, # f7f7f7 0%, # f1f1f1 100%); fona attēls: -ms-lineārs gradients (augšā, # f7f7f7 0%, # f1f1f1 100%); fona attēls: lineārs gradients (augšā, # f7f7f7 0%, # f1f1f1 100%); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); apakšējā daļa: 1px cietais #bbb;
The dienu nosaukumi teksts būs tumši pelēks # 666666 un viņiem būs arī plānas baltas krāsas teksta ēna lai dotu tai nospiestu efektu.
.ui-datepicker th text-transform: lielie burti; fonta lielums: 6pt; polsterējums: 5px 0; krāsa: # 666666; teksta ēna: 1px 0px 0px #fff; filtrs: dropshadow (color = # fff, offx = 1, offy = 0);
Šajā brīdī kalendārs parādīsies šādi:
Datumu veidošana
Kalendāra datumi ir iesaiņoti td vai tabulas dati. Tātad, mēs uzstādīsim polsterējumu 0 lai noņemtu atstarpes starp td un dodiet tai tiesības uz 1px.
.ui-datepicker tbody td polsterējums: 0; labajā pusē: 1px cietais #bbb;
Izņemot pēdējo td, kas nebūs labas robežas. Šim nolūkam mēs iestatām pareizo robežu uz 0.
.ui-datepicker tbody td: pēdējais bērns right-right: 0px;
Tabulas rinda būs gandrīz tāda pati. Tai būs 1px robežu apakšējā daļa, izņemot pēdējo rindu.
.ui-datepicker tbody tr robežu apakšā: 1px cietais #bbb; .ui-datepicker tbody tr: pēdējais bērns robežu apakšā: 0px;
Default, Hover un Active State veidošana
Šajā solī mēs definēsim datumu lidojošo un aktīvos stilus. Vispirms mēs definēsim datuma noklusējuma stāvokli, norādot dimensiju; centrējiet datuma teksta pozīciju, pievienojiet gradienta krāsu un iekšējo balto ēnu.
.ui-datepicker td span, .ui-datepicker td a displejs: inline-bloks; font-weight: bold; teksta saskaņošana: centrs; platums: 30px; augstums: 30px; līnijas augstums: 30px; krāsa: # 666666; teksta ēna: 1px 1px 0px #fff; filtrs: dropshadow (krāsa = # fff, offx = 1, netaisnība = 1); .ui-datepicker-calendar .ui-state-default fons: #ededed; fons: -moz-lineārs gradients (augšā, #ededed 0%, #dedede 100%); fons: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (0%, # ededed), krāsu apstāšanās (100%, # dedede)); fons: -webkit-lineārais gradients (augšā, #ededed 0%, # dedede 100%); fons: -o-lineārie gradienti (augšā, #ededed 0%, # dedede 100%); fons: -ms-lineārais gradients (augšā, #ededed 0%, # dedede 100%); fons: lineārais gradients (augšā, #ededed 0%, # atdots 100%); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: ieliktnis 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: ieliktnis 1px 1px 0px 0px rgba (250, 250, 250, .5); kastes ēna: ieliktnis 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-nav atlasīts .ui-state-default fons: # f4f4f4; krāsa: # b4b3b3;
Kad jūs pārcelsieties pāri datumam, tas kļūs nedaudz balts.
.ui-datepicker-calendar .ui-state-hover fons: # f7f7f7;
Kad datums ir aktīvā stāvoklī, tam būs šādi stili.
.ui-datepicker-calendar .ui-state-active fons: # 6eafbf; -webkit-box-shadow: ieliktnis 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: ieliktnis 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: ieliktnis 0px 0px 10px 0px rgba (0, 0, 0, .1); krāsa: # e0e0e0; teksta ēna: 0px 1px 0px # 4d7a85; filtrs: dropshadow (krāsa = # 4d7a85, offx = 0, netaisnība = 1); robeža: 1px cietais # 55838f; pozīcija: relatīvais; starpība: -1px;
Tagad kalendārā vajadzētu izskatīties daudz labāk.
Pozīcijas noteikšana
Šajā brīdī uzmanīgi skatieties datumu. Kad noklikšķināsiet uz datuma pirmajā vai pēdējā slejā, jūs pamanīsiet, ka aktīvais stāvoklis, kas pārpilda pikseļu pie kalendāra malas.
Tātad, šeit mēs izdarīsim nelielus labojumus.
Vispirms mēs samazināsim datuma platumu līdz 29px, un iestatiet pēdējās slejas labo malu un pirmās slejas kreiso malu līdz 0 mainīt -1px robeža, ko esam iepriekš iestatījuši aktīvajam stāvoklim.
.ui-datepicker-calendar td: pirmais bērns .u-valsts aktīvs platums: 29px; margin-left: 0; .ui-datepicker-calendar td: pēdējā bērna .u-valsts aktīva platums: 29px; labās malas: 0;
Līdzīga attieksme būs arī kalendāra pēdējā rindā.
.ui-datepicker-calendar tr: pēdējā bērna .u-valsts aktīvais augstums: 29px; margas apakšā: 0;
Tagad redzēsim rezultātu. Nu, kalendārs tagad izskatās skaists un lieliski atbilst mūsu dizaina atsaucei. Un jūs varat redzēt demonstrāciju un lejupielādēt avotu, lai pārbaudītu kodu no saitēm zem attēla.
- Demo
- Lejupielādēt avotu
Bonuss: paplašiniet kalendāru
Nu, šodien mēs esam daudz iemācījušies par to, kā izveidot pielāgotu tēmu jQuery UI Datepicker. Bet jums nevajadzētu šeit apstāties, jo vēl joprojām ir daudzas lietas, kuras var paplašināt no šī datplicker. Atkarībā no jūsu jQuery un CSS prasmes kalendāru pagarināt, lai tas būtu līdzīgs - teksta ievade ar pārklājuma datplicker.
- Demo
- Lejupielādēt avotu
Turpmāka lasīšana
Papildu lasīšanai par jQuery UI. Pilnīgu dokumentāciju varat izlasīt šeit:
- Darba sākšana ar jQuery UI
- Tematiskā UI
- jQuery UI: Theming API klases
Galīgās domas
Paldies, ka izlasījāt un sekojāt šai apmācībai, es ceru, ka tas būs noderīgs. Un, ja jums ir jebkādas atsauksmes vai vēlaties pievienot lietas, kas varētu būt nepietiekamas šajā apmācībā, lūdzu, norādiet to tālāk komentāru sadaļā. Vēlreiz paldies).
