Come personalizzare e Theming jQuery UI Datepicker

L'interfaccia utente di jQuery è semplicemente fantastica e, grazie alla sua facilità d'uso, è popolare e ampiamente utilizzata in quasi tutti i siti web che richiedono funzionalità interattive.

E, in questo post, esamineremo una delle funzionalità fornite, il widget Datepicker.

Cercheremo di imparare come personalizzare il tema del calendario, in modo che tu possa creare il tuo tema che corrisponderà al tuo design generale. Tuttavia, è necessario un po 'di comprensione in JavaScript e familiarità con i CSS prima di seguire questo tutorial.

dimostrazione
Scarica fonte

Se sei pronto, iniziamo.

I beni

Prepariamo alcune delle risorse essenziali per il calendario.

Innanzitutto, il design del calendario farà riferimento a questo file PSD da Premium Pixels. Quindi è meglio scaricarlo prima per aiutarci a prendere un campione dei colori di cui abbiamo bisogno. Quindi, scaricare due modelli da Sottile Patterns che useremo come sfondo del nostro calendario. In questo esempio, abbiamo deciso di utilizzare i seguenti modelli: denim nero e pelle scura.

Avremo anche bisogno di uno strumento di sviluppo web come Firebug per ispezionare le classi di elementi / id generati dall'interfaccia utente di jQuery.

Bene, penso che abbiamo avuto abbastanza preparazione. Ora andiamo al primo passo.

Passaggio 1: jQuery UI Datepicker

Per prima cosa vai alla pagina di download dell'interfaccia utente di jQuery. In questa pagina ti verranno presentate alcune opzioni, come segue; il nucleo dell'interfaccia utente, i widget, le interazioni e gli effetti.

Dovremmo deselezionare tutti i componenti, come non abbiamo bisogno di tutti loro.

Quindi, nel widget sezione seleziona solo il datepicker. L'interfaccia utente di jQuery selezionerà automaticamente le dipendenze essenziali, quindi Scaricare il file.

Collega tutti i file scaricati - tranne il CSS - al tuo documento vuoto HTML, come segue:

Passaggio 2: Personalizzazione di Datepicker

In questo passaggio, configureremo un DatePicker con le seguenti opzioni.

Il codice precedente istruirà jQuery a visualizzare il calendario su un elemento con date picker id. Quindi, abbiamo bisogno di mettere il seguente div tag con - ID datapicker - nella sezione del corpo per formare il calendario:

Ora il calendario dovrebbe essere già stato generato e apparire in questo modo, in modo semplice senza stili, ma ha ancora la funzionalità.

Passaggio 3: Gli stili

Ora iniziamo a disegnare il calendario. Inizieremo normalizzando tutti gli elementi, come al solito, e creando un nuovo foglio di stile, in questo esempio lo chiamo datepicker.css. Quindi collegarli tutti al documento HTML.

Quindi, per prima cosa collegheremo uno sfondo al corpo in modo che il nostro HTML non appaia troppo chiaro.

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

Successivamente, specificheremo la larghezza del datapicker, la posizioneremo al centro e aggiungeremo l'ombra esterna per dare l'effetto di rilievo al calendario.

.ui-datepicker width: 216px; altezza: auto; margine: 5px auto 0; font: 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); box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5);

Rimuoveremo anche la decorazione di sottolineatura predefinita da ogni tag di ancoraggio.

.ui-datepicker a text-decoration: none;

Il calendario nell'interfaccia utente jQuery è formato con a tavolo. Quindi, aggiungiamo 100% larghezza per il tavolo, quindi avrà la stessa larghezza massima del wrapper di cui sopra; questo è 216px

.ui-datepicker table width: 100%;

Disegnare la sezione intestazione

Il datepicker ha una sezione di intestazione che contiene Mese anno del calendario. Questa sezione avrà la trama in pelle scura che abbiamo scaricato prima con un colore leggermente bianco e 1px ombra bianca in alto.

.ui-datepicker-header background: url ('... /img/dark_leather.png') ripete 0 0 # 000; colore: # e0e0e0; font-weight: bold; -webkit-box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, .2); box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, .2); text-shadow: 1px -1px 0px # 000; filtro: ombretto (colore = # 000, offx = 1, offy = -1); altezza della linea: 30px; border-width: 1px 0 0 0; border-style: solido; border-color: # 111;

Quindi, concentriamo il Mese posizione.

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

Sostituisci il Il prossimo e prev testo con le immagini della freccia dello sprite affettate dal PSD.

.ui-datepicker-prev, .ui-datepicker-next display: inline-block; larghezza: 30 px; altezza: 30 px; allineamento del testo: centro; cursore: puntatore; background-image: url ('... /img/arrow.png'); background-repeat: no-repeat; altezza della linea: 600%; overflow: nascosto;

Quindi, regola la posizione della freccia, rispettivamente.

.ui-datepicker-prev float: left; background-position: center -30px;  .ui-datepicker-next float: right; posizione di sfondo: centro 0px;

Mentre il nomi dei giorni la sezione è racchiusa all'interno di a thead, in base al nostro riferimento di progettazione, avrà un gradiente leggermente bianco. E, per semplificare il nostro compito, useremo questo strumento per generare il codice del gradiente:

.ui-datepicker thead background-color: # f7f7f7; background-image: -moz-linear-gradient (in alto, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, color-stop (0%, # f7f7f7), color-stop (100%, # f1f1f1)); background-image: -webkit-linear-gradient (in alto, # f7f7f7 0%, # f1f1f1 100%); background-image: -o-linear-gradient (in alto, # f7f7f7 0%, # f1f1f1 100%); background-image: -ms-linear-gradient (in alto, # f7f7f7 0%, # f1f1f1 100%); background-image: linear-gradient (in alto, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solid #bbb;

Il nomi dei giorni il testo avrà il colore grigio scuro di # 666666 e avranno anche un bianco sottile text-shadow per dargli l'effetto premuto.

.ui-datepicker th text-transform: maiuscolo; font-size: 6pt; imbottitura: 5px 0; colore: # 666666; text-shadow: 1px 0px 0px #fff; filtro: ombretto (colore = # fff, offx = 1, offy = 0);

A questo punto, il calendario apparirà in questo modo:

Styling the Dates

Le date del calendario sono incluse all'interno TD o dati della tabella. Quindi, imposteremo il padding su 0 rimuovere gli spazi tra il TD e dargli un bordo destro di 1px.

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

Tranne l'ultimo TD, che non avrà il bordo giusto. Impostiamo il bordo destro su 0 per questo.

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

La riga della tabella sarà quasi la stessa. Avrà un bordo inferiore di 1 pixel ad eccezione dell'ultima riga.

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

Styling Default, Hover e Active State

In questo passaggio definiremo la data al passaggio del mouse e gli stili attivi. Definiremo innanzitutto lo stato predefinito della data specificando la dimensione; centra la posizione del testo della data, aggiungi il colore del gradiente e l'ombra bianca interna.

.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: bold; allineamento del testo: centro; larghezza: 30 px; altezza: 30 px; altezza della linea: 30px; colore: # 666666; text-shadow: 1px 1px 0px #fff; filtro: ombretto (colore = # fff, offx = 1, offy = 1);  .ui-datepicker-calendar .ui-state-default background: #ededed; background: -moz-linear-gradient (in alto, #ededed 0%, #dedede 100%); background: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (0%, # ededed), color-stop (100%, # dedede)); background: -webkit-linear-gradient (in alto, #ededed 0%, # dedede 100%); background: -o-linear-gradient (in alto, #ededed 0%, # dedede 100%); background: -ms-linear-gradient (in alto, #ededed 0%, # dedede 100%); background: linear-gradient (top, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); box-shadow: inset 1px 1px 0px 0px rgba (250, 250, 250, .5);  .ui-datepicker-unselectable .ui-state-default background: # f4f4f4; colore: # b4b3b3;

Quando passi il mouse sopra la data, diventerà leggermente bianco.

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

Quando la data è in uno stato attivo, avrà i seguenti stili.

 .ui-datepicker-calendar .ui-state-active background: # 6eafbf; -webkit-box-shadow: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: inset 0px 0px 10px 0px rgba (0, 0, 0, .1); colore: # e0e0e0; text-shadow: 0px 1px 0px # 4d7a85; filtro: ombretto (colore = # 4d7a85, offx = 0, offy = 1); border: 1px solid # 55838f; posizione: relativa; margine: -1px;

Ora, il calendario dovrebbe apparire molto meglio.

Risolvere la posizione

A questo punto, guarda attentamente la data. Quando fai clic sulla data nella prima o nell'ultima colonna, noterai che lo stato attivo sta traboccando un pixel dal bordo del calendario.

Quindi qui, faremo alcune piccole correzioni.

Innanzitutto diminuiremo la larghezza della data a 29px, e impostare il margine destro dell'ultima colonna e il margine sinistro della prima colonna su 0 per invertire il -1px margine che abbiamo impostato precedentemente per lo stato attivo.

.ui-datepicker-calendar td: first-child .ui-state-active width: 29px; margin-left: 0;  .ui-datepicker-calendar td: last-child .ui-state-active width: 29px; margine-destra: 0;

Anche la data dell'ultima riga del calendario avrà un trattamento simile.

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

Ora, vediamo il risultato. Bene, il calendario ora sembra bello e si adatta perfettamente come riferimento per il design. E, puoi vedere la demo e scaricare la fonte per esaminare il codice dai link sotto l'immagine.

dimostrazione
Scarica fonte

Bonus: estendi il calendario

Bene, oggi abbiamo imparato parecchio su come creare un tema personalizzato per jQuery UI Datepicker. Ma non dovresti fermarti qui, poiché ci sono ancora molte cose che possono essere estese da questo datepicker. A seconda della tua competenza su jQuery e CSS, estendi il calendario in modo che sia così: inserimento di testo con un overlay datepicker.

dimostrazione
Scarica fonte

Ulteriori letture

Per ulteriori informazioni sull'interfaccia utente di jQuery. Puoi leggere la documentazione completa qui:

Iniziare con l'interfaccia utente di jQuery
Theming jquery UI
Interfaccia utente di jQuery: classi API di Theming

Pensieri finali

Grazie per aver letto e seguito questo tutorial, spero che lo trovi utile. E, se hai commenti o vorresti aggiungere cose che potrebbero mancare in questo tutorial, sentiti libero di indicarlo nella sezione commenti qui sotto. Grazie ancora).