Slik tilpasser og taler jQuery UI Datepicker
jQuery UI er rett og slett fantastisk og på grunn av brukervennligheten, er den populær og mye brukt på nesten alle nettsteder som trenger interaktive funksjoner.
Og i dette innlegget ser vi på en av funksjonene, Datepicker-widgeten.
Vi vil prøve å lære å tilpasse kalendertemaet, slik at du vil kunne lage ditt eget tema som samsvarer med din overordnede design. Men du trenger litt forståelse i JavaScript og kjent med CSS før du følger denne opplæringen.
- Demo
- Last ned kilde
Hvis du er klar, la oss komme i gang.
Eiendommene
La oss forberede noen av de essensielle eiendelene til kalenderen.
For det første refererer kalenderen til denne PSD-filen fra Premium Pixels. Så vi kan bedre laste det ned først for å hjelpe oss med å ta et utvalg av fargene vi trenger. Deretter laster du ned to mønstre fra subtil Patterns som vi skal bruke som bakgrunn av kalenderen vår. I dette eksemplet bestemte vi oss for å bruke følgende mønstre: svart denim og mørkt skinn.
Vi vil også trenge et webutviklingsverktøy som Firebug for å inspisere elementklasser / ids generert av jQuery UI.
Vel, jeg tror vi har fått nok forberedelser. La oss nå gå til det første trinnet.
Trinn 1: jQuery UI Datepicker
Gå først til jQuery UI-nedlastingssiden. På denne siden vil du bli presentert med noen få alternativer, som følger; UI Core, Widgets, Interactions og Effects.
Vi burde avvelg alle komponentene, som vi ikke trenger alle av dem.
Så, i widgets seksjonen velg bare datopicker. JQuery brukergrensesnittet vil velge de viktige avhengighetene automatisk, og deretter nedlasting filen.
Koble alle nedlastede filer - bortsett fra CSS - til HTML-blank dokumentet ditt, som følger:
Trinn 2: Tilpasse Datepicker
I dette trinnet vil vi konfigurere en datepicker med følgende alternativer.
Ovennevnte kode vil instruere jQuery å vise kalenderen på et element med Datovelger id. Så, vi må sette følgende div tag med - datepicker ID - i kroppsdelen for å danne kalenderen:
Nå skal kalenderen allerede være generert og virke som denne, ren uten noen stiler, men har fortsatt funksjonaliteten.
Trinn 3: Stilene
La oss begynne å utforme kalenderen. Vi vil starte med å normalisere alle elementene - som vanlig - og lage et nytt stilark, i dette eksempelet heter jeg det datepicker.css. Koble deretter alle sammen til HTML-dokumentet.
Da vil vi først feste en bakgrunn til kroppen, slik at vår HTML ikke ser for vanlig ut.
kropp bakgrunn: url ('... /img/darkdenim3.png') gjenta 0 0 # 555; Deretter skal vi spesifisere datepickerens bredde, plassere den i midten og legge til skygge for å gi prominece-effekten til kalenderen.
.ui-datepicker bredde: 216px; høyde: auto; margin: 5px auto 0; skrifttype: 9pt Arial, sans-serif; -webkit-boks-skygge: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-skygge: 0px 0px 10px 0px rgba (0, 0, 0, .5); boks-skygge: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Vi vil også fjerne standard underlaget dekorasjon fra hver anker tag.
.ui-datepicker a text-decoration: none;
Kalenderen i jQuery UI er formet med a bord. Så la oss legge til 100% bredde for bord, så det vil ha samme maksimale bredde som innpakningen ovenfor; det er 216px
.ui-datepicker bord bredde: 100%;
Styling Header Section
Datepicker har en overskriftsseksjon som inneholder Måned år av kalenderen. Denne delen vil ha den mørke skinnteksturen vi har lastet ned før, med litt hvit skriftfarge og 1px hvit skygge på toppen.
.ui-datepicker-header bakgrunn: url ('... /img/dark_leather.png') gjenta 0 0 # 000; farge: # e0e0e0; font-weight: bold; -webkit-boks-skygge: innspill 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-boks-skygge: innspill 0px 1px 1px 0px rgba (250, 250, 250, .2); boksskygge: innspill 0px 1px 1px 0px rgba (250, 250, 250, .2); tekstskygge: 1px -1px 0px # 000; filter: dropshadow (farge = # 000, offx = 1, offy = -1); linjehøyde: 30px; kantbredde: 1px 0 0 0; border-style: solid; border-farge: # 111; Deretter la oss sitte på Måned stilling.
.ui-datepicker-title text-align: center;
Bytt ut neste og prev tekst med sprite pilbilder skåret fra PSD.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; bredde: 30px; høyde: 30px; tekstjustering: center; markør: pointer; bakgrunnsbilde: url ('... /img/arrow.png'); Bakgrunn-gjenta: nei-gjenta; linjehøyde: 600%; overløp: skjult; Deretter justerer du pilposisjonen.
.ui-datepicker-prev float: left; bakgrunnsposisjon: senter -30px; .ui-datepicker-next float: right; bakgrunnsposisjon: senter 0px;
Mens Dagens navn delen er pakket inn i a thead, Basert på vår designreferanse vil den ha en litt hvit gradient. Og for å forenkle vår oppgave, vil vi bruke dette verktøyet til å generere gradientkoden:
.ui-datepicker thead bakgrunnsfarge: # f7f7f7; bakgrunnsbilde: -moz-lineær-gradient (topp, # f7f7f7 0%, # f1f1f1 100%); bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # f7f7f7), fargestopp (100%, # f1f1f1)); bakgrunnsbilde: -webkit-lineær-gradient (topp, # f7f7f7 0%, # f1f1f1 100%); bakgrunnsbilde: -o-lineær gradient (topp, # f7f7f7 0%, # f1f1f1 100%); bakgrunnsbilde: -ms-lineær gradient (topp, # f7f7f7 0%, # f1f1f1 100%); bakgrunnsbilde: lineær gradient (topp, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); grensebunn: 1px solid #bbb;
De Dagens navn Teksten har den mørkegrå farge på # 666666 og de vil også ha en tynn hvit text-shadow for å gi den den pressede effekten.
.ui-datepicker th text-transform: store bokstaver; skriftstørrelse: 6pt; polstring: 5px 0; farge: # 666666; tekstskygge: 1px 0px 0px #fff; filter: dropshadow (farge = # fff, offx = 1, offy = 0);
På dette tidspunktet vises kalenderen slik:
Styling datoene
Kalenderen datoene er pakket inn i td eller tabelldata. Så, vi vil sette polstring til 0 for å fjerne mellomrom mellom td og gi den en høyre kant på 1px.
.ui-datepicker tbody td padding: 0; grense-høyre: 1px solid #bbb;
Bortsett fra det siste td, som ikke har riktig ramme. Vi setter den rette grensen til 0 for dette.
.ui-datepicker tbody td: siste barn grense-høyre: 0px;
Bordraden vil være nesten den samme. Det vil ha en 1px grense bunn unntatt for den siste raden.
.ui-datepicker tbody tr border-bottom: 1px solid #bbb; .ui-datepicker tbody tr: siste barn border-bottom: 0px;
Styling Standard, Hover og Active State
I dette trinnet vil vi definere dataflyter og aktive stiler. Vi vil først definere datautgangsstandarden ved å spesifisere dimensjonen; senter dato teksten posisjon, legg til gradient farge og indre hvit skygge.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: bold; tekstjustering: center; bredde: 30px; høyde: 30px; linjehøyde: 30px; farge: # 666666; tekstskygge: 1px 1px 0px #fff; filter: dropshadow (farge = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default bakgrunn: #ededed; bakgrunn: -moz-lineær-gradient (topp, #ededed 0%, #dedede 100%); bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0%, # ededed), fargestopp (100%, # dedede)); bakgrunn: -webkit-lineær-gradient (topp, #ededed 0%, # dedede 100%); bakgrunn: -o-lineær-gradient (topp, #ededed 0%, # dedede 100%); bakgrunn: -ms-lineær gradient (topp, #ededed 0%, # dedede 100%); bakgrunn: lineær gradient (topp, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-boks-skygge: innsett 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-boks-skygge: innsett 1px 1px 0px 0px rgba (250, 250, 250, .5); boksskygge: innsett 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default bakgrunn: # f4f4f4; farge: # b4b3b3;
Når du svinger over datoen, blir den svakt hvit.
.ui-datepicker-calendar .ui-state-hover bakgrunn: # f7f7f7;
Når datoen er i aktiv tilstand, vil den ha følgende stiler.
.ui-datepicker-calendar .ui-state-active bakgrunn: # 6eafbf; -webkit-boks-skygge: innsett 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-boks-skygge: innsett 0px 0px 10px 0px rgba (0, 0, 0, .1); boks-skygge: innsett 0px 0px 10px 0px rgba (0, 0, 0, .1); farge: # e0e0e0; tekstskygge: 0px 1px 0px # 4d7a85; filter: dropshadow (farge = # 4d7a85, offx = 0, offy = 1); grense: 1px solid # 55838f; posisjon: relativ; margin: -1px;
Nå skal kalenderen se mye bedre ut.
Feste posisjonen
På dette tidspunktet, se på datoen nøye. Når du klikker på datoen i første eller siste kolonne, vil du legge merke til at den aktive tilstanden overfylder en piksel av kanten av kanten.
Så her, vil vi gjøre noen små rettelser.
Først vil vi redusere datobredden til 29px, og sett den høyre marginen til den siste kolonnen og venstre marg for den første kolonnen til 0 å reversere -1px margin vi har angitt tidligere for aktiv tilstand.
.ui-datepicker-calendar td: første barn .ui-state-aktiv width: 29px; margin-venstre: 0; .ui-datepicker-calendar td: siste barn .ui-state-active width: 29px; margin-høyre: 0;
Datoen på siste rad i kalenderen vil også ha en lignende behandling.
.ui-datepicker-calendar tr: siste barn .ui-state-aktiv høyde: 29px; margin-bunn: 0;
Nå, la oss se resultatet. Vel, kalenderen ser nå vakker ut og passer perfekt til vår designreferanse. Og du kan se demoen og laste ned kilden for å undersøke koden fra koblingene under bildet.
- Demo
- Last ned kilde
Bonus: Utvid kalenderen
Nå, i dag har vi lært mye om hvordan du oppretter et tilpasset tema for jQuery UI Datepicker. Men du bør ikke stoppe her, siden det fortsatt er mange ting som kan utvides fra denne datoen. Avhengig av jQuery- og CSS-kompetansen din, utvider du kalenderen slik at den er slik: Tekstinngang med overleggstidspicker.
- Demo
- Last ned kilde
Videre lesning
For videre lesing på jQuery UI. Du kan lese hele dokumentasjonen her:
- Komme i gang med jQuery brukergrensesnitt
- Theming JQUery UI
- jQuery UI: Theming API-klasser
Siste tanker
Takk for at du leser og følger denne veiledningen, jeg håper du finner det nyttig. Og, hvis du har tilbakemelding eller ønsker å legge til ting som kan mangle fra denne opplæringen, kan du peke på det i kommentarseksjonen nedenfor. Takk igjen).
