Så här anpassar och anpassar du jQuery UI Datepicker
jQuery-användargränssnittet är helt enkelt fantastiskt och på grund av användarvänligheten är det populärt och används allmänt på nästan vilken webbplats som helst som behöver interaktiva funktioner.
Och i det här inlägget tittar vi på en av funktionerna, Datepicker-widgeten.
Vi kommer att försöka lära dig hur du anpassar kalendertemat, så att du kommer att kunna skapa ditt eget tema som motsvarar din övergripande design. Du behöver dock lite förståelse i JavaScript och kännedom om CSS innan du följer den här handledningen.
- demo
- Hämta källa
Om du är redo, låt oss komma igång.
Tillgångarna
Låt oss förbereda några av de viktigaste tillgångarna för kalendern.
Först kommer kalenderdesignen att hänvisa till denna PSD-fil från premiumpixlar. Så vi skulle bättre ladda ner det först för att hjälpa oss att ta ett urval av de färger vi behöver. Ladda sedan två mönster från Subtil Mönster som vi kommer att använda som bakgrunden till vår kalender. I det här exemplet bestämde vi oss för att använda följande mönster: svart denim och mörkt läder.
Vi behöver också ett webbutvecklingsverktyg som Firebug för att inspektera elementklasser / ids som genereras av jQuery-gränssnittet.
Tja, jag tror vi har fått tillräckligt med förberedelser. Nu går vi till det första steget.
Steg 1: jQuery UI Datepicker
Gå först till jQuery UI-nedladdningssidan. På denna sida kommer du att presenteras med några alternativ, enligt följande; UI-kärnan, widgets, interaktioner och effekter.
Vi borde avmarkera alla komponenter, eftersom vi inte behöver dem alla.
Då, i widgets avsnittet väljer endast datumpicker. JQuery-användargränssnittet väljer automatiskt de väsentliga beroenden, och sedan ladda ner filen.
Länk alla nedladdade filer - utom CSS - till ditt HTML-blank dokument, enligt följande:
Steg 2: Anpassa Datepicker
I det här steget kommer vi att konfigurera en datumpicker med följande alternativ.
Ovanstående kod kommer att instruera jQuery att visa kalendern på ett element med Datumväljare id. Så måste vi sätta följande div tagg med - datepicker ID - i kroppssektionen för att skapa kalendern:
Nu måste kalendern redan ha genererats och visas som den här, vanlig utan några stilar, men har fortfarande funktionaliteten.
Steg 3: Stilarna
Nu börjar vi utforma kalendern. Vi börjar med att normalisera alla element - som vanligt - och skapa ett nytt stilark, i det här exemplet heter jag det datepicker.css. Koppla sedan alla dem till HTML-dokumentet.
Sedan lägger vi först en bakgrund till kroppen så att vår HTML inte ser för vanligt ut.
kropp bakgrund: url ('... /img/darkdenim3.png') upprepa 0 0 # 555; Därefter kommer vi att ange datumpickarens bredd, placera den i mitten och lägga till droppskugga för att ge promineceffekten till kalendern.
.ui-datepicker width: 216px; höjd: auto; marginal: 5px auto 0; typsnitt: 9pt Arial, sans-serif; -webkit-box-skugga: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-skugga: 0px 0px 10px 0px rgba (0, 0, 0, .5); boxskugga: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Vi kommer också att ta bort standardunderlaget dekoration från varje ankare tagg.
.ui-datepicker a text-decoration: none;
Kalendern i jQuery UI är formad med a tabell. Så, låt oss lägga till 100% bredd för tabell, så det kommer att ha samma maximal bredd som omslaget ovan; det är 216px
.ui-datepicker bord bredd: 100%;
Styling av rubrikavsnittet
Datepicker har en rubrik som innehåller Månad år av kalendern. Det här avsnittet kommer att ha den mörka lädertextur som vi har laddat ner tidigare med lite vit typsnitt och 1px vit skugga på toppen.
.ui-datepicker-header background: url ('... /img/dark_leather.png') upprepa 0 0 # 000; färg: # e0e0e0; font-weight: bold; -webkit-box-skugga: inmatning 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-skugga: inset 0px 1px 1px 0px rgba (250, 250, 250, .2); boxskugga: inmatning 0px 1px 1px 0px rgba (250, 250, 250, .2); textskugga: 1px -1px 0px # 000; filter: dropshadow (färg = # 000, offx = 1, offy = -1); linjehöjd: 30px; kantbredd: 1px 0 0 0; gränsstil: fast; border-color: # 111; Låt oss sedan centrera Månad placera.
.ui-datepicker-title text-align: center;
Ersätt Nästa och Föregående text med sprite-pilbilderna skivade från PSD.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; bredd: 30px; höjd: 30px; text-align: center; markör: pekare; bakgrundsbild: url ('... /img/arrow.png'); bakgrundsrepetition: nej-repetera; linjehöjd: 600%; översvämning: gömd; Justera sedan pilpositionen.
.ui-datepicker-prev float: left; bakgrundsställning: center -30px; .ui-datepicker-next float: right; bakgrundsposition: centrum 0px;
Medan dagnamn sektionen är insvept inom a thead, Baserat på vår designreferens kommer den att ha en något vit gradient. Och för att förenkla vår uppgift använder vi det här verktyget för att generera gradientkoden:
.ui-datepicker thead bakgrundsfärg: # f7f7f7; bakgrundsbild: -moz-linjär-gradient (topp, # f7f7f7 0%, # f1f1f1 100%); bakgrundsbild: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # f7f7f7), färgstopp (100%, # f1f1f1)); bakgrundsbild: -webkit-linjär-gradient (topp, # f7f7f7 0%, # f1f1f1 100%); bakgrundsbild: -o-linjär gradient (topp, # f7f7f7 0%, # f1f1f1 100%); bakgrundsbild: -ms-linjär gradient (topp, # f7f7f7 0%, # f1f1f1 100%); bakgrundsbild: linjär gradient (topp, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solid #bbb;
De dagnamn Texten kommer att ha den mörkgrå färgen på # 666666 och de kommer också att ha en tunn vit text-shadow för att ge den den pressade effekten.
.ui-datepicker th text-transform: uppercase; typsnittstorlek: 6pt; vaddering: 5px 0; färg: # 666666; textskugga: 1px 0px 0px #fff; filter: dropshadow (färg = # fff, offx = 1, offy = 0);
Vid denna tidpunkt visas kalendern så här:
Styling Datum
Kalenderdatumen är inslagna inom td eller tabelldata. Så ska vi ställa in vadderingen till 0 för att ta bort mellanrummen mellan td och ge den en rätt gräns på 1px.
.ui-datepicker tbody td padding: 0; gränsen-höger: 1px solid #bbb;
Förutom för det sista td, som inte kommer att ha rätt gräns. Vi ställer den högra gränsen till 0 för detta.
.ui-datepicker tbody td: sista barnet gränsen-höger: 0px;
Bordraden kommer att vara nästan densamma. Det kommer att ha en gräns med 1 px utom för sista raden.
.ui-datepicker tbody tr border-bottom: 1px solid #bbb; .ui-datepicker tbody tr: sista barnet gränsbotten: 0px;
Styling Standard, Hover och Active State
I det här steget definierar vi datumväljaren och aktiva stilar. Vi definierar först datumets standardstatus genom att ange dimensionen; Centrera datumtextpositionen, lägg till gradientfärg och inre vitskugga.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: bold; text-align: center; bredd: 30px; höjd: 30px; linjehöjd: 30px; färg: # 666666; textskugga: 1px 1px 0px #fff; filter: dropshadow (färg = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default bakgrund: #ededed; bakgrund: -moz-linjär gradient (topp, #ededed 0%, #dedede 100%); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # eded), färgstopp (100%, # dedede)); bakgrund: -webkit-linjär-gradient (topp, #ededed 0%, # dedede 100%); bakgrund: -o-linjär-gradient (topp, #ededed 0%, # dedede 100%); bakgrund: -ms-linjär gradient (topp, #ededed 0%, # dedede 100%); bakgrund: linjär gradient (topp, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-skugga: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-skugga: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); boxskugga: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default bakgrund: # f4f4f4; färg: # b4b3b3;
När du svävar över datumet blir det något vitt.
.ui-datepicker-calendar .ui-state-hover bakgrund: # f7f7f7;
När datumet är aktivt, kommer det att ha följande stilar.
.ui-datepicker-calendar .ui-state-active bakgrund: # 6eafbf; -webkit-box-skugga: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-skugga: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); boxskugga: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); färg: # e0e0e0; textskugga: 0px 1px 0px # 4d7a85; filter: dropshadow (färg = # 4d7a85, offx = 0, offy = 1); gränsen: 1px fast # 55838f; position: relativ; marginal: -1px;
Nu ska kalendern se mycket bättre ut.
Fastställ positionen
Se nu noggrant på datumet. När du klickar på datumet i den första eller sista kolumnen kommer du att märka att det aktiva tillståndet överflödar en pixel utanför kalenderkanten.
Så här ska vi göra några små fixar.
Först kommer vi att minska datumbredden till 29px, och ställ in den högra marginalen för den sista kolumnen och vänster marginal för den första kolumnen till 0 att vända om -1px marginal som vi tidigare har ställt för det aktiva tillståndet.
.ui-datepicker-calendar td: första barnet .ui-state-active width: 29px; marginal-vänster: 0; .ui-datepicker-calendar td: sista barnet .ui-state-active width: 29px; marginal-höger: 0;
Datumet i sista raden i kalendern kommer också att ha en liknande behandling.
.ui-datepicker-kalender tr: sista barnet .ui-state-aktiv height: 29px; marginalbotten: 0;
Nu får vi se resultatet. Tja, kalendern ser nu vacker ut och passar perfekt som vår designreferens. Och du kan se demoen och ladda ner källan för att undersöka koden från länkarna nedanför bilden.
- demo
- Hämta källa
Bonus: Förläng kalendern
Tja, idag har vi lärt oss en hel del om hur man skapar ett anpassat tema för jQuery UI Datepicker. Men du borde inte sluta här, eftersom det fortfarande finns många saker som kan förlängas från den här datumpickaren. Beroende på din jQuery- och CSS-kompetens förlänger du kalendern så här - textinmatning med överlagringsdatumspicker.
- demo
- Hämta källa
Vidare läsning
För vidare läsning på jQuery UI. Du kan läsa hela dokumentationen här:
- Komma igång med jQuery UI
- Theming JQUery UI
- jQuery UI: Theming API-klasser
Slutgiltiga tankar
Tack för att du läste och följt denna handledning hoppas du tycker att den är användbar. Och, om du har några återkopplingar eller vill lägga till saker som kan saknas i den här handledningen kan du peka ut det i kommentarfältet nedan. Tack igen).
