Kako Prilagajanje in Theming jQuery UI Datepicker
Uporabniški vmesnik jQuery je preprosto odličen in zaradi enostavnosti uporabe je priljubljen in se pogosto uporablja na skoraj vseh spletnih mestih, ki potrebujejo interaktivne funkcije.
In v tem prispevku bomo pogledali eno od priloženih funkcij, pripomoček Datepicker.
Skušali se bomo naučiti, kako prilagoditi temo koledarja, tako da boste lahko ustvarili lastno temo, ki bo ustrezala vašemu celotnemu dizajnu. Vendar pa potrebujete nekaj razumevanja v JavaScriptu in poznavanje CSS, preden sledite tej vadnici.
- Demo
- Prenesi vir
Če ste pripravljeni, začnimo.
Sredstva
Pripravimo nekaj bistvenih sredstev za koledar.
Prvič, oblikovanje koledarja se bo nanašalo na to datoteko PSD iz Premium Pixels. Zato jo moramo najprej prenesti, da bi nam pomagali vzeti vzorce barv, ki jih potrebujemo. Nato prenesite dva vzorca iz Subtilna Vzorci ki jih bomo uporabili kot ozadje našega koledarja. V tem primeru smo se odločili za uporabo naslednjih vzorcev: črni denim in temno usnje.
Potrebovali bomo tudi orodje za razvoj spletnih strani, kot je Firebug, da pregledamo razrede / ID-je elementov, ki jih generira uporabniški vmesnik jQuery.
Mislim, da smo imeli dovolj priprav. Zdaj pa pojdimo na prvi korak.
Korak 1: jQuery UI Datepicker
Najprej pojdite na stran za prenos jQuery UI. Na tej strani boste predstavili nekaj možnosti, kot sledi; jedro uporabniškega vmesnika, pripomočki, interakcije in učinki.
Morali bi počistite vse komponente, ker jih ne potrebujemo vseh.
Potem, v Pripomočki izberite samo izbirnik datuma. UI jQuery bo samodejno izbral bistvene odvisnosti in nato prenesete datoteka.
Povežite vse prenesene datoteke - razen CSS - v prazen dokument HTML, kot sledi:
2. korak: Prilagajanje izbirnika datuma
V tem koraku bomo konfigurirali izbirnik datumov z naslednjimi možnostmi.
Zgornja koda bo naročila jQuery, da prikaže koledar z elementom datepicker id. Zato moramo postaviti naslednje div oznaka s - ID datuma - izbirnika - v razdelku telesa za oblikovanje koledarja:
Sedaj bi moral biti koledar že ustvarjen in videti tako, brez stila, vendar ima še vedno funkcionalnost.
3. korak: Slogi
Zdaj pa začnimo s pisanjem koledarja. Začeli bomo z normalizacijo vseh elementov - kot ponavadi - in ustvarjanjem novega sloga, v tem primeru ga imenujem datepicker.css. Nato jih povežite z dokumentom HTML.
Nato najprej dodamo ozadje telesu, tako da naš HTML ne izgleda preveč navaden.
body ozadje: url ('… /img/darkdenim3.png') ponovite 0 0 # 555; Nato bomo določili širino izbirnika datuma, jo postavili v središče in dodali senco, da bo učinek prominece v koledarju.
.ui-datepicker širina: 216px; višina: avto; margin: 5px auto 0; pisava: 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);
Odstranili bomo tudi privzeto podčrtano dekoracijo iz vsake sidrne oznake.
.ui-datepicker a text-decoration: none;
Koledar v uporabniškem vmesniku jQuery se oblikuje z a tabela. Torej, dodajmo 100% širina za. \ t tabela, tako bo imela enako največjo širino kot ovoj zgoraj; to je 216 px
.tabela ui-datepicker širina: 100%;
Oblikovanje razdelka glave
Izbirnik datumov vsebuje odsek z glavo Mesec in leto koledarja. Ta razdelek bo imel temno teksturo usnja, ki smo jo pred tem prenesli z rahlo belo barvo pisave in 1px bela senca na vrhu.
.ui-datepicker-header ozadje: url ('… /img/dark_leather.png') ponovi 0 0 # 000; barva: # e0e0e0; font-weight: krepko; -webkit-box-shadow: vložek 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: vložek 0px 1px 1px 0px rgba (250, 250, 250, .2); box-shadow: vložek 0px 1px 1px 0px rgba (250, 250, 250, .2); besedilna senca: 1px -1px 0px # 000; filter: dropshadow (barva = # 000, offx = 1, offy = -1); višina vrstice: 30px; meja-širina: 1px 0 0 0; mejni slog: trdna; border-color: # 111; Naprej, osredotočimo Mesec položaj.
.ui-datepicker-title text-align: center;
Zamenjaj Naslednji in Prejšnja besedilo s slikami puščice, ki so izrezane iz PSD.
.ui-datepicker-prev, .ui-datepicker-next prikaz: inline-block; širina: 30px; višina: 30px; text-align: center; kazalec: kazalec; ozadje-slika: url ('… /img/arrow.png'); ponovitev v ozadju: brez ponovitve; višina linije: 600%; overflow: hidden; Nato prilagodite položaj puščice.
.ui-datepicker-prev float: levo; položaj ozadja: center -30px; .ui-datepicker-next float: desno; položaj ozadja: središče 0px;
Medtem ko je imena dni odsek je ovit v a Tega, na podlagi našega referenčnega načrta bo imel rahlo beli gradient. Da bi poenostavili nalogo, bomo s tem orodjem ustvarili kodo preliva:
.ui-datepicker thead ozadje-barva: # f7f7f7; background-image: -moz-linear-gradient (zgoraj, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0%, # f7f7f7), barvno zaustavitev (100%, # f1f1f1)); background-image: -webkit-linear-gradient (zgoraj, # f7f7f7 0%, # f1f1f1 100%); background-image: -o-linearni gradient (zgoraj, # f7f7f7 0%, # f1f1f1 100%); background-image: -ms-linear-gradient (zgoraj, # f7f7f7 0%, # f1f1f1 100%); background-image: linearni gradient (top, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); obroba spodaj: 1px trdna #bbb;
The imena dni besedilo bo imelo temno sivo barvo # 666666 in imajo tudi tanko belo text-shadow , da mu daste pritisnjen učinek.
.ui-datepicker th preoblikovanje besedila: velike črke; velikost pisave: 6pt; oblazinjenje: 5px 0; barva: # 666666; text-shadow: 1px 0px 0px #fff; filter: dropshadow (barva = # fff, offx = 1, offy = 0);
Na tej točki se bo koledar prikazal takole:
Oblikovanje datumov
Datumi koledarja so oviti znotraj td ali podatkov tabele. Torej bomo nastavili oblazinjenje na 0 , da odstranite presledke med td in ji podajte desno mejo 1px.
.ui-datepicker tbody td polnilo: 0; border-right: 1px solid #bbb;
Razen zadnjega td, ki ne bodo imeli prave meje. Za to smo nastavili desno mejo na 0. \ t.
.ui-datepicker tbody td: zadnji otrok border-right: 0px;
Vrstica tabele bo skoraj enaka. Ima spodnje meje 1px, razen zadnje vrstice.
.ui-datepicker tbody tr border-bottom: 1px solid #bbb; .ui-datepicker tbody tr: zadnji-otrok border-bottom: 0px;
Styling privzetega, lebdenja in aktivnega stanja
V tem koraku bomo definirali datum hover in aktivne sloge. Najprej določimo privzeto stanje datuma z določitvijo dimenzije; centrirajte položaj besedila datuma, dodajte prelivno barvo in notranjo belo senco.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: krepko; text-align: center; širina: 30px; višina: 30px; višina vrstice: 30px; barva: # 666666; besedilna senca: 1px 1px 0px #fff; filter: dropshadow (barva = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default ozadje: #ededed; ozadje: -moz-linear-gradient (vrh, #ededed 0%, #dedede 100%); ozadje: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (0%, # ededed), barvno stop (100%, # dedede)); ozadje: -webkit-linear-gradient (vrh, #ededed 0%, # dedede 100%); ozadje: -o-linearni gradient (zgoraj, #ededed 0%, # dedede 100%); ozadje: -ms-linear-gradient (vrh, #ededed 0%, # dedede 100%); ozadje: linearno gradient (top, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: vložek 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: vložek 1px 1px 0px 0px rgba (250, 250, 250, .5); box-shadow: vložek 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default ozadje: # f4f4f4; barva: # b4b3b3;
Ko premaknete kazalec nad datum, se bo spremenil v rahlo belo.
.ui-datepicker-calendar .ui-state-hover ozadje: # f7f7f7;
Ko je datum v aktivnem stanju, bo imel naslednje sloge.
.ui-datepicker-calendar .ui-state-active ozadje: # 6eafbf; -webkit-box-shadow: vložek 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: vložek 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: vložek 0px 0px 10px 0px rgba (0, 0, 0, .1); barva: # e0e0e0; text-shadow: 0px 1px 0px # 4d7a85; filter: dropshadow (barva = # 4d7a85, offx = 0, offy = 1); obroba: 1px trdna # 55838f; položaj: relativna; marža: -1px;
Sedaj bi moral koledar videti veliko boljši.
Določanje položaja
Na tej točki pozorno preglejte datum. Ko kliknete na datum na prvem ali v zadnjem stolpcu, boste opazili, da aktivno stanje prelivanja pikslov iz roba koledarja.
Tukaj bomo naredili nekaj manjših popravkov.
Najprej bomo zmanjšali širino datuma na 29 px, in nastavite desni rob zadnjega stolpca in levega roba prvega stolpca na 0 obrniti -1px marža, ki smo jo predhodno nastavili za aktivno stanje.
.ui-datepicker-calendar td: prvi otrok .ui-state-active širina: 29px; margina levo: 0; .ui-datepicker-calendar td: zadnji-otrok .ui-state-active širina: 29px; margin-right: 0;
Podobno obravnavo bo imel tudi zadnji datum koledarja.
.ui-datepicker-calendar tr: zadnji-otrok .ui-state-active višina: 29px; margin-bottom: 0;
Zdaj pa poglejmo rezultat. Koledar zdaj izgleda lepo in se odlično ujema z našimi referenčnimi načrti. Lahko si ogledate predstavitev in prenesete vir, da preveri kodo na povezavah pod sliko.
- Demo
- Prenesi vir
Bonus: razširite koledar
No, danes smo se naučili veliko o tem, kako ustvariti temo po meri za jQuery UI Datepicker. Ampak ne bi se smeli ustaviti tukaj, saj je še veliko stvari, ki jih je mogoče razširiti s tega datuma. Odvisno od vašega znanja jQuery in CSS razširite koledar tako, da bo tak - vnos besedila s prekrivnim datumom.
- Demo
- Prenesi vir
Nadaljnje branje
Za nadaljnje branje na uporabniškem vmesniku jQuery. Celotno dokumentacijo lahko preberete tukaj:
- Kako začeti z uporabniškim vmesnikom jQuery
- Theming jQUery UI
- jQuery UI: Razredi razredov API-ja
Končne misli
Hvala za branje in sledenje tej vadnici, upam, da vam bo to koristno. In, če imate kakršne koli povratne informacije ali želite dodati stvari, ki morda manjkajo iz te vadnice, vas prosimo, da jo navedete v spodnjem oddelku za komentarje. Hvala še enkrat).
