Kako prilagoditi i Theming jQuery UI Datepicker
jQuery UI jednostavno je strašan i zbog jednostavnosti korištenja, popularan je i široko korišten u gotovo bilo kojoj web-lokaciji koja zahtijeva interaktivne značajke.
I, u ovom postu, pogledat ćemo jednu od navedenih značajki, widget Datepicker.
Pokušat ćemo naučiti kako prilagoditi temu kalendara, tako da možete stvoriti vlastitu temu koja će odgovarati vašem cjelokupnom dizajnu. Međutim, trebate malo razumijevanja u JavaScriptu i poznavanje CSS-a prije nego pratite ovaj vodič.
- Demo
- Preuzimanje izvora
Ako ste spremni, počnimo.
Imovina
Pripremimo neke od bitnih sredstava za kalendar.
Prvo, dizajn kalendara odnosit će se na PSD datoteku iz Premium Pixela. Zato je bolje da ga prvo preuzmemo kako bismo nam pomogli uzeti uzorak boja koje nam trebaju. Zatim preuzmite dva uzorka iz fin obrasci koje ćemo koristiti kao pozadinu našeg kalendara. U ovom primjeru, odlučili smo koristiti sljedeće uzorke: crni traper i tamnu kožu.
Također ćemo trebati alat za razvoj weba kao što je Firebug za pregled klasa elemenata / ID-ova koje generira JQuery UI.
Pa, mislim da smo imali dovoljno priprema. Idemo sada na prvi korak.
Korak 1: jQuery UI Datepicker
Prvo idite na stranicu za preuzimanje jQuery UI. Na ovoj ćete stranici biti prikazano nekoliko opcija, kako slijedi; jezgre korisničkog sučelja, widgeti, interakcije i učinci.
Trebali bismo odznačite sve komponente, jer ih ne trebamo sve.
Zatim, u Widgeti odjeljak odaberite samo alat za odabir datuma. Korisničko sučelje jQuery automatski će odabrati bitne ovisnosti, a zatim preuzimanje datoteka Datoteka.
Povežite sve preuzete datoteke - osim CSS-a - u prazan HTML dokument, kako slijedi:
Korak 2: Prilagodba uređaja za odabir datuma
U ovom koraku konfigurirat ćemo alat za odabir datuma sa sljedećim opcijama.
Gornji kod će uputiti jQuery na prikaz kalendara s elementom datepicker iskaznica. Dakle, trebamo staviti sljedeće div oznaka sa - datumpicker ID - u odjeljku tijela za formiranje kalendara:
Sada je kalendar trebao biti već generiran i izgledati ovako, bez ikakvih stilova, ali još uvijek ima funkcionalnost.
Korak 3: Stilovi
Sada ćemo početi oblikovati kalendar. Započet ćemo normalizacijom svih elemenata - kao i obično - i stvaranjem nove stilske tablice, u ovom primjeru datepicker.css. Zatim ih sve povežite s HTML dokumentom.
Zatim ćemo tijelu prvo dodavati pozadinu tako da naš HTML ne izgleda previše jednostavno.
body pozadina: url ('… / img/darkdenim3.png') ponovite 0 0 # 555; Zatim ćemo odrediti širinu datuma za biranje datuma, postaviti je do centra i dodati kapljicu kako bi učinak promineća dao kalendaru.
.ui-datepicker širina: 216px; visina: auto; margin: 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); kutija-sjena: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Također ćemo ukloniti zadano ukrasno podcrtavanje sa svake oznake sidra.
.ui-datepicker a text-decoration: none;
Kalendar u jQuery sučelju formira se s a stol. Dakle, dodajmo 100% širina za stol, tako će imati istu maksimalnu širinu kao omot gore; to je 216px
.ui-datepicker tablica širina: 100%;
Stiliziranje odjeljka zaglavlja
Umetnik datuma sadrži odjeljak zaglavlja koji sadrži Mjesec godina kalendara. Ovaj odjeljak će imati tamnu teksturu kože koju smo prethodno preuzeli s malo bijelom bojom i 1 piksel bijela sjena na vrhu.
.ui-datepicker-header pozadina: url ('… /img/dark_leather.png') ponavlja 0 0 # 000; boja: # e0e0e0; font-weight: bold; -webkit-box-shadow: umetak 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: umetak 0px 1px 1px 0px rgba (250, 250, 250, .2); box-shadow: umetak 0px 1px 1px 0px rgba (250, 250, 250, .2); tekst-sjena: 1px -1px 0px # 000; filter: dropshadow (boja = # 000, offx = 1, offy = -1); visina linije: 30px; granica-širina: 1px 0 0 0; granični stil: čvrst; border-color: # 111; Sljedeće, usredotočimo se na Mjesec položaj.
.ui-datepicker-title text-align: centar;
Zamijenite Sljedeći i Prethodna tekst sa slikama strelica koje su izrezane iz PSD-a.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; širina: 30px; visina: 30px; poravnavanje teksta: centar; pokazivač: pokazivač; background-image: url ('… / img/arrow.png'); pozadina-ponavljanje: nema ponavljanja; visina linije: 600%; preljev: skriven; Zatim podesite položaj strelice.
.ui-datepicker-prev float: lijevo; pozicija u pozadini: centar -30px; .ui-datepicker-next float: desno; pozicija u pozadini: središte 0px;
Dok imena dana odjeljak je omotan unutar Oglasna, na temelju našeg referentnog dizajna, on će imati blago bijeli gradijent. A kako bismo pojednostavili naš zadatak, koristit ćemo ovaj alat za generiranje gradijentnog koda:
.ui-datepicker thead pozadinska boja: # f7f7f7; background-image: -moz-linear-gradient (gore, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-gradijent (linearno, lijevo gore, lijevo dno, boja-stop (0%, # f7f7f7), boja-stop (100%, # f1f1f1)); background-image: -webkit-linear-gradient (gore, # f7f7f7 0%, # f1f1f1 100%); background-image: -o-linearni gradijent (vrh, # f7f7f7 0%, # f1f1f1 100%); background-image: -ms-linearni gradijent (gore, # f7f7f7 0%, # f1f1f1 100%); background-image: linearno-gradijent (gore, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); granica-dno: 1px solid #bbb;
imena dana tekst će imati tamno sivu boju # 666666 i oni će također imati bijelu bijelu boju text-shadow da biste mu dali pritisnut efekt.
.ui-datepicker th text-transform: velika slova; veličina fonta: 6pt; padding: 5px 0; boja: # 666666; tekst-sjena: 1px 0px 0px #fff; filter: dropshadow (boja = # fff, offx = 1, offy = 0);
U ovom trenutku kalendar će se pojaviti ovako:
Stiliziranje datuma
Datumi kalendara su obavijeni unutar td ili podataka tablice. Dakle, postavit ćemo padding na 0 za uklanjanje razmaka između td i dajte mu pravu granicu od 1px.
.ui-datepicker tbody td punjenje: 0; border-right: 1px solid #bbb;
Osim posljednjeg td, koji neće imati pravu granicu. Postavili smo pravu granicu na 0 za ovo.
.ui-datepicker tbody td: posljednje dijete border-right: 0px;
Redak tablice bit će gotovo isti. Imat će dno granice od 1px, osim zadnjeg retka.
.ui-datepicker tbody tr granično-dno: 1px solid #bbb; .ui-datepicker tbody tr: posljednje dijete border-bottom: 0px;
Stiliziranje zadanog stanja, stanja kretanja i aktivnog stanja
U ovom koraku definiramo datum hover i aktivne stilove. Prvo ćemo definirati zadano stanje datuma navođenjem dimenzije; centrirajte položaj teksta teksta, dodajte boju gradijenta i unutarnju bijelu sjenu.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: bold; poravnavanje teksta: centar; širina: 30px; visina: 30px; visina linije: 30px; boja: # 666666; tekst-sjena: 1px 1px 0px #fff; filter: dropshadow (boja = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default pozadina: #ededed; background: -moz-linear-gradient (vrh, #ededed 0%, #dedede 100%); pozadina: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, zaustavljanje boje (0%, # ededed), zaustavljanje boje (100%, # dedede)); background: -webkit-linear-gradient (vrh, #ededed 0%, # dedede 100%); pozadina: -o-linearnog gradijenta (gore, #ededed 0%, # dedede 100%); pozadina: -ms-linear-gradient (vrh, #ededed 0%, # dedede 100%); pozadina: linearni gradijent (gore, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: umetak 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: umetak 1px 1px 0px 0px rgba (250, 250, 250, .5); box-shadow: umetak 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default pozadina: # f4f4f4; boja: # b4b3b3;
Kada prijeđete mišem preko datuma, on će se pretvoriti u bijelo.
.ui-datepicker-calendar .ui-state-hover pozadina: # f7f7f7;
Kada je datum u aktivnom stanju, imat će sljedeće stilove.
.ui-datepicker-calendar .ui-state-active pozadina: # 6eafbf; -webkit-box-shadow: umetak 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: umetak 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: umetak 0px 0px 10px 0px rgba (0, 0, 0, .1); boja: # e0e0e0; tekst-sjena: 0px 1px 0px # 4d7a85; filter: dropshadow (boja = # 4d7a85, offx = 0, offy = 1); granica: 1px solid # 55838f; pozicija: relativna; margina: -1px;
Sada bi kalendar trebao izgledati mnogo bolje.
Popravljanje položaja
U ovom trenutku pažljivo pogledajte datum. Kada kliknete na datum na prvom ili posljednjem stupcu, primijetit ćete da aktivno stanje prelijeva piksel izvan ruba kalendara.
Dakle, ovdje ćemo napraviti neke male popravke.
Prvo ćemo smanjiti širinu datuma na 29px, i postavite desnu marginu posljednjeg stupca i lijeve margine prvog stupca na 0 obrnuti -1 piksel marža koju smo prethodno postavili za aktivno stanje.
.ui-datepicker-kalendar td: first-child .ui-state-active širina: 29px; margina lijevo: 0; .ui-datepicker-kalendar td: posljednje dijete .ui-state-active širina: 29px; margin-right: 0;
Datum u posljednjem retku kalendara također će imati sličan tretman.
.ui-datepicker-calendar tr: posljednje dijete .ui-state-active visina: 29px; margin-bottom: 0;
Sada ćemo vidjeti rezultat. Pa, kalendar sada izgleda lijepo i savršeno se uklapa u naš dizajn. Možete vidjeti demo i preuzeti izvor za provjeru koda iz veza ispod slike.
- Demo
- Preuzimanje izvora
Bonus: proširite kalendar
Pa, danas smo dosta naučili o tome kako stvoriti prilagođenu temu za JQuery UI Datepicker. Ali ne bi se trebali zaustaviti ovdje, jer još uvijek ima mnogo stvari koje se mogu proširiti s ovog datuma. Ovisno o vašem jQuery i CSS stručnosti, proširite kalendar na sljedeći način - unos teksta s datumom za preklapanje.
- Demo
- Preuzimanje izvora
Daljnje čitanje
Za daljnje čitanje na jQuery UI. Ovdje možete pročitati cjelokupnu dokumentaciju:
- Početak rada s korisničkim sučeljem jQuery
- Theming jQUery UI
- jQuery UI: Theming API klase
Završne misli
Hvala vam za čitanje i praćenje ovog vodiča, nadam se da će vam biti korisno. I, Ako imate bilo kakvu povratnu informaciju ili želite dodati stvari koje možda nedostaju u ovom vodiču, slobodno to navedite u odjeljku komentara u nastavku. Hvala još jednom).
