Sådan tilpasser og bruger jQuery UI Datepicker
jQuery UI er simpelthen fantastisk og på grund af den nemme brug er den populær og meget udbredt i næsten enhver hjemmeside, der har brug for interaktive funktioner.
Og i dette indlæg vil vi se på en af de funktioner, der leveres, Datepicker-widgeten.
Vi vil forsøge at lære at tilpasse kalendertemaet, så du vil kunne oprette dit eget tema, der svarer til dit overordnede design. Men du har brug for en smule forståelse i JavaScript og kendskab til CSS, før du følger denne vejledning.
- Demo
- Download kilde
Hvis du er klar, lad os komme i gang.
Aktiverne
Lad os forberede nogle af de væsentlige aktiver for kalenderen.
For det første henviser kalenderdesignet til denne PSD-fil fra Premium Pixels. Så vi kan bedre downloade det først for at hjælpe os med at tage en prøve af de farver, vi har brug for. Dernæst download to mønstre fra Diskret Mønstre som vi vil bruge som baggrund for vores kalender. I dette eksempel besluttede vi at bruge følgende mønstre: sort denim og mørkt læder.
Vi skal også bruge et webudviklingsværktøj som Firebug til at inspicere elementklasser / ids genereret af jQuery UI.
Nå, jeg tror, vi har fået nok forberedelse. Lad os nu gå til det første skridt.
Trin 1: jQuery UI Datepicker
Gå først til jQuery UI download siden. På denne side vil du blive præsenteret med nogle få muligheder, som følger; UI Core, Widgets, Interactions og Effects.
Vi skulle fravælg alle komponenterne, da vi ikke har brug for dem alle.
Derefter i Widgets sektion vælg kun datopicker. JQuery-brugergrænsefladen vælger de væsentlige afhængigheder automatisk, og derefter Hent filen.
Link alle de downloadede filer - undtagen CSS - til dit HTML-blanke dokument, som følger:
Trin 2: Tilpasning af Datepicker
I dette trin vil vi konfigurere en datepicker med følgende muligheder.
Ovennævnte kode vil instruere jQuery at vise kalenderen på et element med datepicker id. Så, vi har brug for at sætte følgende div tag med - datepicker ID - i kropsafsnittet for at danne kalenderen:
Nu skal kalenderen allerede være genereret og fremstå som denne, ren uden nogen stilarter, men har stadig funktionaliteten.
Trin 3: Stilene
Lad os nu begynde at stylere kalenderen. Vi vil starte med at normalisere alle elementer - som sædvanligt - og skabe et nyt stylesheet, i dette eksempel nævner jeg det datepicker.css. Link dem derefter til HTML-dokumentet.
Derefter vil vi først vedhæfte en baggrund til kroppen, så vores HTML ikke ser for almindeligt ud.
krop baggrund: url ('... /img/darkdenim3.png') gentag 0 0 # 555; Dernæst vil vi angive datepickerens bredde, placere den i midten og tilføje drop shadow for at give prominece effekten til kalenderen.
.ui-datepicker bredde: 216px; højde: 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); box-skygge: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Vi vil også fjerne standard understregning dekoration fra hvert anker tag.
.ui-datepicker a text-decoration: none;
Kalenderen i jQuery UI er dannet med a bord. Så lad os tilføje 100% bredde for bord, så det vil have samme maksimale bredde som indpakningen ovenfor; det er 216px
.ui-datepicker bord bredde: 100%;
Styling af overskriftsafsnittet
Datepicker har en header sektion indeholdende Måned år af kalenderen. Dette afsnit vil have den mørke lædertekstur, vi har downloadet før, med lidt hvid skriftfarve og 1px hvid skygge øverst.
.ui-datepicker-header baggrund: url ('... /img/dark_leather.png') gentag 0 0 # 000; farve: # e0e0e0; font-weight: bold; -webkit-boks-skygge: indsæt 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-skygge: indsæt 0px 1px 1px 0px rgba (250, 250, 250, .2); box-skygge: indsæt 0px 1px 1px 0px rgba (250, 250, 250, .2); tekstskygge: 1px -1px 0px # 000; filter: dropshadow (farve = # 000, offx = 1, offy = -1); linjens højde: 30px; kantbredde: 1px 0 0 0; grænsestil: solid; border-farve: # 111; Herefter skal vi centrere Måned position.
.ui-datepicker-title text-align: center;
Udskift Næste og forrige tekst med sprite-pilbillederne skåret fra PSD'en.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; bredde: 30px; højde: 30px; tekst-align: center; markør: pointer; baggrundsbillede: url ('... /img/arrow.png'); background-repeat: no-repeat; linjehøjde: 600%; overløb: skjult; Indstil derefter henholdsvis pilpositionen.
.ui-datepicker-prev float: left; baggrundsstilling: center -30px; .ui-datepicker-next float: right; baggrundsstilling: center 0px;
Mens dagnavne sektionen er pakket ind i a thead, Baseret på vores designreference vil den have en lidt hvid gradient. Og for at forenkle vores opgave vil vi bruge dette værktøj til at generere gradientkoden:
.ui-datepicker thead baggrundsfarve: # f7f7f7; baggrundsbillede: -moz-lineær-gradient (top, # f7f7f7 0%, # f1f1f1 100%); baggrundsbillede: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0%, # f7f7f7), farve stop (100%, # f1f1f1)); baggrundsbillede: -webkit-lineær-gradient (top, # f7f7f7 0%, # f1f1f1 100%); baggrundsbillede: -o-lineær-gradient (top, # f7f7f7 0%, # f1f1f1 100%); baggrundsbillede: -ms-lineær gradient (top, # f7f7f7 0%, # f1f1f1 100%); baggrundsbillede: lineær gradient (top, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solid #bbb;
Det dagnavne teksten vil have den mørkegrå farve på # 666666 og de vil også have en tynd hvid tekst-skygge for at give den den pressede effekt.
.ui-datepicker th text-transform: store bogstaver; skrifttypestørrelse: 6pt; polstring: 5px 0; farve: # 666666; tekstskygge: 1px 0px 0px #fff; filter: dropshadow (farve = # fff, offx = 1, offy = 0);
På dette tidspunkt vises kalenderen sådan:
Styling Datoer
Kalenderen datoer er pakket ind indenfor TD eller tabel data. Så vi sætter polstring til 0 for at fjerne mellemrummet mellem TD og giv den en højre grænse på 1px.
.ui-datepicker tbody td polstring: 0; grænse-højre: 1px solid #bbb;
Bortset fra det sidste TD, som ikke har den rigtige grænse. Vi sætter den rigtige grænse til 0 for dette.
.ui-datepicker tbody td: sidste barn grænse-højre: 0px;
Bordrækken vil være næsten den samme. Det vil have en 1 px grænsebund undtagen den sidste række.
.ui-datepicker tbody tr border-bottom: 1px solid #bbb; .ui-datepicker tbody tr: sidste barn border-bottom: 0px;
Styling Standard, Hover og Active State
I dette trin vil vi definere dataflynger og aktive stilarter. Vi definerer først datostandardtilstanden ved at angive dimensionen; center dato dato tekst position, tilføj farvegradient og indre hvid skygge.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: bold; tekst-align: center; bredde: 30px; højde: 30px; linjens højde: 30px; farve: # 666666; tekstskygge: 1px 1px 0px #fff; filter: dropshadow (farve = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default baggrund: #ededed; baggrund: -moz-lineær gradient (top, #ededed 0%, #dedede 100%); baggrund: -webkit-gradient (lineær, venstre top, venstre bund, farve stop (0%, # ededed), farve stop (100%, # dedede)); baggrund: -webkit-lineær-gradient (top, #ededed 0%, # dedede 100%); baggrund: -o-lineær gradient (top, #ededed 0%, # dedede 100%); baggrund: -ms-lineær gradient (top, #ededed 0%, # dedede 100%); baggrund: lineær gradient (top, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-skygge: indsæt 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-skygge: indsæt 1px 1px 0px 0px rgba (250, 250, 250, .5); box-skygge: indsæt 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default baggrund: # f4f4f4; farve: # b4b3b3;
Når du svinger over datoen, bliver den svagt hvid.
.ui-datepicker-calendar .ui-state-hover baggrund: # f7f7f7;
Når datoen er i en aktiv tilstand, vil den have følgende stilarter.
.ui-datepicker-calendar .ui-state-active baggrund: # 6eafbf; -webkit-boks-skygge: indsæt 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: indsæt 0px 0px 10px 0px rgba (0, 0, 0, .1); box-skygge: indsæt 0px 0px 10px 0px rgba (0, 0, 0, .1); farve: # e0e0e0; tekstskygge: 0px 1px 0px # 4d7a85; filter: dropshadow (farve = # 4d7a85, offx = 0, offy = 1); grænse: 1px fast # 55838f; stilling: relativ; margen: -1px;
Kalenderen skal nu se meget bedre ud.
Fastgørelse af positionen
På dette tidspunkt skal du se omhyggeligt på datoen. Når du klikker på datoen i den første eller den sidste kolonne, vil du bemærke, at den aktive tilstand, der overfylder en pixel fra kanten af kanten.
Så her vil vi lave nogle små rettelser.
Først vil vi reducere datobredden til 29px, og indstil den højre margen for den sidste kolonne og venstre margen for den første kolonne til 0 at vende om -1px margen, vi tidligere har indstillet til den aktive tilstand.
.ui-datepicker-calendar td: first-child .ui-state-active bredde: 29px; margin-venstre: 0; .ui-datepicker-calendar td: sidste barn .ui-state-active width: 29px; margen-højre: 0;
Datoen i sidste række af kalenderen vil også have en lignende behandling.
.ui-datepicker-kalender tr: sidste barn .ui-state-aktiv højde: 29px; margin-bund: 0;
Lad os nu se resultatet. Nå ser kalenderen nu smuk ud og passer perfekt til vores designreference. Og du kan se demoen og downloade kilden for at undersøge koden fra linkene under billedet.
- Demo
- Download kilde
Bonus: Udvid kalenderen
Nå, i dag har vi lært ret meget om, hvordan du opretter et brugerdefineret tema til jQuery UI Datepicker. Men du bør ikke stoppe her, da der stadig er mange ting, der kan udvides fra denne datepicker. Afhængig af jQuery og CSS-færdigheden udvides kalenderen til at være som denne - tekstindtastning med en overlay datepicker.
- Demo
- Download kilde
Yderligere læsning
For yderligere læsning på jQuery UI. Du kan læse hele dokumentationen her:
- Kom godt i gang med jQuery UI
- Theming jQUery UI
- jQuery UI: Theming API klasser
Afsluttende tanker
Tak for at læse og følge denne vejledning, jeg håber du finder det nyttigt. Og, hvis du har nogen tilbagemelding eller gerne vil tilføje ting, der mangler i denne vejledning, er du velkommen til at pege på det i kommentarfeltet nedenfor. Tak igen).
