Cum de a personaliza și de a schimba jQuery UI Datepicker
jQuery UI este pur și simplu minunat și datorită ușurinței de utilizare, este popular și utilizat pe scară largă în aproape orice site web care are nevoie de funcții interactive.
Și, în acest post, vom examina una dintre caracteristicile oferite, widgetul Datepicker.
Vom încerca să învățăm cum să personalizăm tema calendarului, astfel încât să puteți crea o temă proprie care să corespundă designului dumneavoastră general. Cu toate acestea, aveți nevoie de un pic de înțelegere în JavaScript și familiaritatea cu CSS înainte de a urma acest tutorial.
- Demo
- Descărcați sursa
Dacă sunteți gata, să începem.
Activele
Să pregătim o parte din activele esențiale pentru calendar.
În primul rând, designul calendarului se va referi la acest fișier PSD de la Pixeli Premium. Deci, ar fi bine să o descărcăm mai întâi pentru a ne ajuta să luăm o mostră de culori de care avem nevoie. Apoi, descarcă două modele Subtil Modele de pe care o vom folosi ca fundal al calendarului nostru. În acest exemplu, am decis să folosim următoarele modele: denim negru și piele închisă.
De asemenea, vom avea nevoie de un instrument de dezvoltare web, cum ar fi Firebug, pentru a inspecta clasele de elemente / ID-urile generate de jQuery UI.
Ei bine, cred că am pregătit destul. Acum să mergem la primul pas.
Pasul 1: jQuery UI Datepicker
Mai întâi, accesați pagina de descărcare a jQuery UI. În această pagină veți fi prezentați câteva opțiuni, după cum urmează; UI Core, widget-uri, interacțiuni și efecte.
Noi ar trebui să deselectați toate componentele, deoarece nu avem nevoie de toți.
Apoi, în Widget-uri selectați numai selectorul de date. Interfața jQuery va selecta automat dependențele esențiale și apoi Descarca fișierul.
Conectați toate fișierele descărcate - cu excepția CSS - la documentul gol HTML, după cum urmează:
Pasul 2: Particularizarea setului de date
În acest pas, vom configura un set de date cu următoarele opțiuni.
Codul de mai sus va instrui jQuery să afișeze calendarul pe un element cu DatePicker id. Deci, trebuie să punem următoarele div eticheta cu - datepicker ID - în secțiunea corpului pentru a forma calendarul:
Acum, calendarul ar fi trebuit deja să fie generat și să apară astfel, simplu fără stiluri, dar are totuși funcționalitatea.
Pasul 3: Stilurile
Acum să începem stilul calendarului. Vom începe prin normalizarea tuturor elementelor - ca de obicei - și crearea unei noi foi de stil, în acest exemplu pe care o numesc datepicker.css. Apoi conectați-i pe toți la documentul HTML.
Apoi, vom atașa mai întâi un fundal corpului, astfel încât HTML-ul nostru nu pare prea simplu.
organism background: url ('... /img/darkdenim3.png') repetare 0 0 # 555; Apoi, vom specifica lățimea datepicker-ului, o vom poziționa în centru și vom adăuga o umbră de picătură pentru a da efectul de prominee calendarului.
.ui-datepicker lățime: 216px; înălțime: 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);
De asemenea, vom elimina decorarea subliniată implicită din fiecare etichetă de ancorare.
.ui-datepicker a text-decoration: nimic;
Calendarul din interfața jQuery este format din a masa. Deci, să adăugăm 100% lățime pentru masa, astfel încât acesta va avea aceeași lățime maximă ca și ambalajul de mai sus; acesta este 216px
.ui-datepicker tabel lățime: 100%;
Modelarea secțiunii Antet
Datapicker are o secțiune antet care conține Lună an din calendar. Această secțiune va avea textura întunecată din piele pe care am descărcat-o cu o culoare de culoare albă și albă 1px alb umbra în partea de sus.
.ui-datepicker-header background: url ('... /img/dark_leather.png') repetați 0 0 # 000; culoare: # e0e0e0; font-weight: bold; -webkit-box-shadow: inset 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: insetul 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; filtru: dropshadow (culoare = # 000, offx = 1, offy = -1); linia-înălțime: 30px; latimea graniței: 1px 0 0 0; stilul frontal: solid; culoarea frontală: # 111; Apoi, să centrăm centrul Lună poziţie.
.ui-datepicker-title text-aliniere: centru;
Inlocuieste Următor → și Anterior text cu imaginile săgeată sprite tăiate din PSD.
.ui-datepicker-prev, .ui-datepicker-next afișare: inline-block; lățime: 30px; înălțime: 30px; text-align: centru; cursor: pointer; fundal-imagine: url ('... /img/arrow.png'); fundal-repet: nu-repeta; înălțimea liniei: 600%; overflow: ascuns; Apoi, reglați poziția săgeții respectiv.
.ui-datepicker-prev float: stânga; pozitie fundal: centru -30px; .ui-datepicker-next float: dreapta; pozitie fundal: centru 0px;
In timp ce zile secțiunea este înfășurată în interiorul a dinlicitația, pe baza referinței noastre de proiectare, va avea un gradient ușor alb. Și, pentru a ne simplifica sarcina, vom folosi acest instrument pentru a genera codul de gradient:
.ui-datepicker thead culoare-fundal: # f7f7f7; fundal-imagine: -moz-linear-gradient (top, # f7f7f7 0%, # f1f1f1 100%); fundal-imagine: -webkit-gradient (liniar, stânga sus, jos stânga, stop color (0%, # f7f7f7), stop color (100%, # f1f1f1)); fundal-imagine: -webkit-linear-gradient (top, # f7f7f7 0%, # f1f1f1 100%); fundal-imagine: -o-linear-gradient (top, # f7f7f7 0%, # f1f1f1 100%); fundal-imagine: -ms-linear-gradient (top, # f7f7f7 0%, # f1f1f1 100%); fundal-imagine: gradient linear (top, # f7f7f7 0%, # f1f1f1 100%); filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); frontieră-fund: 1px solid #bbb;
zile textul va avea culoarea gri închis # 666666 și vor avea și un alb subțire text-shadow pentru a-i da efectul presat.
.ui-datepicker th text-transform: majuscule; font-size: 6pt; padding: 5px 0; culoare: # 666666; text-shadow: 1px 0px 0px #fff; filtru: dropshadow (culoare = # fff, offx = 1, offy = 0);
În acest moment, calendarul va apărea astfel:
Modelarea datelor
Datele calendarului sunt înfășurate td sau date de tabel. Deci, vom seta padding-ul 0 pentru a elimina spațiile dintre td și dați-i o margine dreaptă de 1px.
.ui-datepicker tbody td umplutura: 0; frontieră-dreapta: 1px solid #bbb;
Cu excepția ultimelor td, care nu va avea granița dreaptă. Am setat marginea dreaptă la 0 pentru asta.
.ui-datepicker tbody td: ultimul-copil border-right: 0px;
Rândul tabelului va fi aproape același. Va avea o fundătură de 1px, cu excepția ultimului rând.
.ui-datepicker tbody tr frontieră-fund: 1px solid #bbb; .ui-datepicker tbody tr: ultimul-copil border-bottom: 0px;
Styling Starea implicită, Hover și activă
În acest pas vom defini stilurile de afișare a datei și stilurile active. Vom defini mai întâi starea implicită a datei specificând dimensiunea; centrați poziția textului data, adăugați culoarea gradientului și umbra interioară albă.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: bold; text-align: centru; lățime: 30px; înălțime: 30px; linia-înălțime: 30px; culoare: # 666666; text-shadow: 1px 1px 0px #fff; filtru: dropshadow (culoare = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default fundal: #ededed; fundal: -moz-linear-gradient (top, #ededed 0%, #dedede 100%); fundal: -webkit-gradient (liniar, stânga sus, jos stânga, oprire color (0%, # ededed), stop color (100%, # dedede)); fundal: -webkit-gradient linear (top, #ededed 0%, # dedede 100%); fundal: -o-gradient linear (top, #eded 0%, # dedede 100%); fundal: -ms-linear-gradient (top, #ededed 0%, # dedede 100%); fundal: gradient liniar (de sus, #ededed 0%, # dedede 100%); filtru: 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; culoare: # b4b3b3;
Când plasați cursorul peste dată, va deveni ușor alb.
.ui-datepicker-calendar .ui-state-hover fundal: # f7f7f7;
Când data este într-o stare activă, va avea următoarele stiluri.
.ui-datepicker-calendar .ui-stat-activ fundal: # 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); culoare: # e0e0e0; text-shadow: 0px 1px 0px # 4d7a85; filtru: dropshadow (culoare = # 4d7a85, offx = 0, offy = 1); frontieră: 1px solid # 55838f; poziția: relativă; margine: -1px;
Acum, calendarul ar trebui să arate mult mai bine.
Fixarea poziției
În acest moment, uita-te la data cu atenție. Când faceți clic pe data de la prima sau ultima coloană, veți observa că starea activă care depășește un pixel de pe marginea calendarului.
Deci, aici vom face niște corecții mici.
Mai întâi vom scădea lățimea de date la 29px, și setați marginea din dreapta a ultimei coloane și marginea din stânga a primei coloane 0 pentru a inversa -1px marja pe care am setat-o anterior pentru starea activă.
.ui-datepicker-calendar td: primul-copil .ui-state-activ lățime: 29px; margin-stânga: 0; .ui-datepicker-calendar td: ultimul copil .ui-stat-activ width: 29px; margin-dreapta: 0;
Data la ultimul rând din calendar va avea, de asemenea, un tratament similar.
.ui-datepicker-calendar tr: ultimul-copil .ui-state-active height: 29px; marginea inferioară: 0;
Acum, să vedem rezultatul. Ei bine, calendarul arată acum frumos și se potrivește perfect ca referință de proiectare. Și, puteți vedea demo-ul și puteți descărca sursa pentru a examina codul de la linkurile de sub imagine.
- Demo
- Descărcați sursa
Bonus: Extindeți Calendarul
Ei bine, astăzi am învățat destul de multe despre cum să creați o temă personalizată pentru jQuery UI Datepicker. Dar nu ar trebui să vă opriți aici, deoarece încă mai sunt multe lucruri care pot fi extinse de la acest pionier. În funcție de competența dvs. jQuery și CSS, extindeți calendarul astfel încât să introduceți textul cu ajutorul unui set de date suprapuse.
- Demo
- Descărcați sursa
Citirea în continuare
Pentru citirea ulterioară a jQuery UI. Puteți citi documentația completă aici:
- Noțiuni de bază cu jQuery UI
- Nume interfață de interfață
- jQuery UI: clasele API Theming
Gândurile finale
Vă mulțumim pentru că ați citit și ați urmat acest tutorial, sper că vă este util. Și dacă aveți feedback sau doriți să adăugați lucruri care ar putea lipsi din acest tutorial, nu ezitați să o indicați în secțiunea de comentarii de mai jos. Multumesc din nou).
