Hoe jQuery UI Datepicker aan te passen en aan te passen

jQuery UI is eenvoudigweg geweldig en vanwege het gebruiksgemak is het gebruiksvriendelijk en wordt het op bijna elke website gebruikt waarvoor interactieve functies nodig zijn.

En in dit bericht zullen we kijken naar een van de aangeboden functies, de Datepicker-widget.

We zullen proberen om het kalenderthema aan te passen, zodat u uw eigen thema kunt maken dat overeenkomt met uw algehele ontwerp. U hebt echter een beetje begrip van JavaScript en vertrouwdheid met CSS nodig voordat u deze zelfstudie volgt.

demonstratie
Download de bron

Als je klaar bent, laten we beginnen.

De activa

Laten we een aantal van de essentiële elementen voor de kalender voorbereiden.

Eerst zal het kalenderontwerp verwijzen naar dit PSD-bestand van Premium Pixels. We kunnen het dus beter eerst downloaden om ons te helpen een voorbeeld te nemen van de kleuren die we nodig hebben. Download vervolgens twee patronen van subtiel patronen die we zullen gebruiken als de achtergrond van onze kalender. In dit voorbeeld hebben we besloten om de volgende patronen te gebruiken: zwarte denim en donker leer.

We hebben ook een hulpprogramma voor webontwikkeling nodig, zoals Firebug, om elementklassen / id's te inspecteren die zijn gegenereerd door de gebruikersinterface van jQuery.

Nou, ik denk dat we genoeg voorbereiding hebben gehad. Laten we nu naar de eerste stap gaan.

Stap 1: jQuery UI Datepicker

Ga eerst naar de downloadpagina van jQuery UI. Op deze pagina ziet u een aantal opties, als volgt; de UI-kern, widgets, interacties en effecten.

We zouden moeten deselecteer alle componenten, omdat we ze niet allemaal nodig hebben.

Vervolgens in de widgets sectie selecteer alleen de datepicker. De gebruikersinterface van jQuery selecteert automatisch de essentiële afhankelijkheden en vervolgens downloaden het bestand.

Koppel alle gedownloade bestanden - behalve de CSS - naar uw HTML-lege document, als volgt:

Stap 2: De Datepicker aanpassen

In deze stap configureren we een datepicker met de volgende opties.

De bovenstaande code geeft de jQuery opdracht om de kalender op een element met weer te geven datumkiezer ID kaart. Dus we moeten het volgende doen div tag met - datepicker ID - in de body sectie om de kalender te vormen:

Nu zou de kalender al moeten zijn gegenereerd en zo worden weergegeven, zonder stijlen, maar nog steeds met de functionaliteit.

Stap 3: De stijlen

Laten we nu de kalender gaan stylen. We beginnen met het normaliseren van alle elementen - zoals gebruikelijk - en het maken van een nieuwe stylesheet, in dit voorbeeld noem ik het datepicker.css. Koppel ze vervolgens allemaal aan het HTML-document.

Vervolgens voegen we eerst een achtergrond toe aan de body zodat onze HTML er niet al te duidelijk uitziet.

body background: url ('... /img/darkdenim3.png') herhaal 0 0 # 555;

Vervolgens specificeren we de breedte van de datepicker, positioneren we deze naar het midden en voegen we slagschaduw toe om het prominece effect aan de kalender te geven.

.ui-datepicker width: 216px; hoogte: auto; marge: 5px auto 0; lettertype: 9pt Arial, schreefloos; -webkit-vak-schaduw: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); vakschaduw: 0px 0px 10px 0px rgba (0, 0, 0, .5);

We verwijderen ook de standaard onderstrepingsdecoratie van elke ankertag.

.ui-datepicker a text-decoration: none;

De kalender in jQuery UI is gevormd met een tafel. Dus laten we toevoegen 100% breedte voor de tafel, dus het heeft dezelfde maximale breedte als de wikkel boven; dat is 216px

.ui-datepicker tafel breedte: 100%;

De kopsectie stylen

De datepicker heeft een kopgedeelte met daarin Maand jaar van de kalender. Dit gedeelte heeft de donkere lederstructuur die we eerder hebben gedownload met een enigszins witte letterkleur en 1px witte schaduw bovenaan.

.ui-datepicker-header background: url ('... /img/dark_leather.png') herhaal 0 0 # 000; kleur: # e0e0e0; lettertype: vet; -webkit-box-shadow: inzet 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: inzet 0px 1px 1px 0px rgba (250, 250, 250, .2); box-shadow: inzet 0px 1px 1px 0px rgba (250, 250, 250, .2); tekstschaduw: 1px -1px 0px # 000; filter: slagschaduw (kleur = # 000, offx = 1, offy = -1); regelhoogte: 30px; grensbreedte: 1px 0 0 0; randstijl: stevig; randkleur: # 111;

Laten we vervolgens de Maand positie.

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

Vervang de volgende en Vorige tekst met de afbeeldingen van de spritepijl uit de PSD.

.ui-datepicker-vorige, .ui-datepicker-volgende display: inline-block; breedte: 30px; hoogte: 30 px; text-align: center; cursor: pointer; background-image: url ('... /img/arrow.png'); achtergrondherhaling: geen herhaling; regelhoogte: 600%; overloop verborgen;

Pas vervolgens de pijlpositie aan.

.ui-datepicker-prev float: left; achtergrond-positie: centrum -30px;  .ui-datepicker-next float: right; achtergrond-positie: midden 0px;

Terwijl de dagnamen sectie is ingepakt in een thead, gebaseerd op onze ontwerpreferentie, zal het een lichtjes witte gradiënt hebben. En om onze taak te vereenvoudigen, gebruiken we deze tool om de verloopcode te genereren:

.ui-datepicker thead background-colour: # f7f7f7; achtergrondafbeelding: -moz-linear-gradient (boven, # f7f7f7 0%, # f1f1f1 100%); achtergrondafbeelding: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (0%, # f7f7f7), kleur-stop (100%, # f1f1f1)); achtergrondafbeelding: -webkit-lineair verloop (boven, # f7f7f7 0%, # f1f1f1 100%); achtergrondafbeelding: -o-lineaire gradiënt (boven, # f7f7f7 0%, # f1f1f1 100%); achtergrondafbeelding: -ms-lineaire gradiënt (boven, # f7f7f7 0%, # f1f1f1 100%); achtergrondafbeelding: lineair verloop (boven, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solid #bbb;

De dagnamen tekst heeft de donkergrijze kleur van # 666666 en ze zullen ook een dunne witte hebben schaduw tekst om het het geperste effect te geven.

.ui-datepicker th text-transform: hoofdletters; lettergrootte: 6pt; opvulling: 5px 0; kleur: # 666666; text-shadow: 1px 0px 0px #fff; filter: slagschaduw (kleur = # fff, offx = 1, offy = 0);

Op dit punt zal de kalender als volgt verschijnen:

Styling van de data

De kalenderdata zijn ingepakt td of tabelgegevens. Dus we zullen de opvulling instellen op 0 om de spaties tussen de te verwijderen td en geef het een goede grens van 1px.

.ui-datepicker tbody td opvulling: 0; border-right: 1px solid #bbb;

Behalve de laatste td, welke geen rechter grens zal hebben. We stellen hiervoor de rechterrand in op 0.

.ui-datepicker tbody td: last-child border-right: 0px;

De tabelrij zal bijna hetzelfde zijn. Het heeft een 1px rand onderaan behalve de laatste rij.

.ui-datepicker tbody tr border-bottom: 1px solid #bbb;  .ui-datepicker tbody tr: last-child border-bottom: 0px;

Styling van de standaard, zweefstand en actieve staat

In deze stap zullen we de datum-zweving en actieve stijlen definiëren. We zullen eerst de datumstandaardstatus definiëren door de dimensie op te geven; centreer de datumtekstpositie, voeg kleurovergangskleur en binnenste witte schaduw toe.

.ui-datepicker td span, .ui-datepicker td a display: inline-block; lettertype: vet; text-align: center; breedte: 30px; hoogte: 30 px; regelhoogte: 30px; kleur: # 666666; text-shadow: 1px 1px 0px #fff; filter: slagschaduw (kleur = # fff, offx = 1, offy = 1);  .ui-datepicker-calendar .ui-state-default background: #ededed; achtergrond: -moz-linear-gradient (boven, #ededed 0%, #dedede 100%); achtergrond: -webkit-gradiënt (lineair, linker boven, links onder, kleur-stop (0%, # ededed), kleur-stop (100%, # dedede)); achtergrond: -webkit-lineair verloop (boven, #ededed 0%, # dedede 100%); achtergrond: -o-lineaire gradiënt (boven, #ededed 0%, # dedede 100%); achtergrond: -ms-lineaire gradiënt (boven, #ededed 0%, # dedede 100%); achtergrond: lineair verloop (boven, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: inzet 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: inzet 1px 1px 0px 0px rgba (250, 250, 250, .5); box-shadow: inzet 1px 1px 0px 0px rgba (250, 250, 250, .5);  .ui-datepicker-unselectable .ui-state-default background: # f4f4f4; kleur: # b4b3b3;

Wanneer u de muisaanwijzer over de datum beweegt, wordt deze wit.

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

Wanneer de datum in een actieve status is, heeft deze de volgende stijlen.

 .ui-datepicker-calendar .ui-state-active background: # 6eafbf; -webkit-box-shadow: inzet 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: inzet 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: inzet 0px 0px 10px 0px rgba (0, 0, 0, .1); kleur: # e0e0e0; tekstschaduw: 0px 1px 0px # 4d7a85; filter: slagschaduw (kleur = # 4d7a85, offx = 0, offy = 1); rand: 1px vast # 55838f; positie: relatief; marge: -1 px;

Nu zou de kalender er veel beter uit moeten zien.

De positie bepalen

Bekijk de datum nu zorgvuldig. Wanneer u op de datum klikt bij de eerste of de laatste kolom, ziet u dat de actieve status een pixel van de kalenderrand overloopt.

Dus hier zullen we een paar kleine reparaties doen.

Eerst zullen we de datumbreedte verkleinen tot 29px, en stel de rechtermarge van de laatste kolom en linkermarge van de eerste kolom in 0 om de -1px marge die we eerder hebben ingesteld voor de actieve status.

.ui-datepicker-calendar td: first-child .ui-state-active width: 29px; marge links: 0;  .ui-datepicker-calendar td: last-child .ui-state-active width: 29px; marge-rechts: 0;

De datum op de laatste rij van de kalender heeft ook een vergelijkbare behandeling.

.ui-datepicker-calendar tr: last-child .ui-state-active height: 29px; margin-bottom: 0;

Laten we nu het resultaat zien. Nou, de kalender ziet er nu mooi uit en past perfect als onze ontwerpreferentie. En u kunt de demo bekijken en de bron downloaden om de code te onderzoeken via de links onder de afbeelding.

demonstratie
Download de bron

Bonus: verleng de kalender

Nou, vandaag hebben we heel veel geleerd over het maken van een aangepast thema voor jQuery UI Datepicker. Maar je moet hier niet stoppen, want er zijn nog steeds veel dingen die uit deze datepicker kunnen worden uitgebreid. Afhankelijk van je jQuery- en CSS-vaardigheid, verleng je de kalender om zo te zijn: tekstinvoer met een overlay-datapicker.

demonstratie
Download de bron

Verder lezen

Voor meer informatie over de gebruikersinterface van jQuery. U kunt de volledige documentatie hier lezen:

Aan de slag met de gebruikersinterface van jQuery
Thematische gebruikersinterface
jQuery-gebruikersinterface: thema-API-klassen

Laatste gedachten

Bedankt voor het lezen en volgen van deze tutorial, ik hoop dat je het nuttig vindt. En als je feedback hebt of dingen wilt toevoegen die misschien ontbreken in deze zelfstudie, kun je dit in het gedeelte 'Opmerkingen' hieronder aangeven. Nogmaals bedankt).