Ako prispôsobiť a upraviť jQuery UI Datepicker
jQuery UI je jednoducho úžasné a kvôli jednoduchosti použitia je populárny a široko používaný v takmer každej webovej stránke, ktorá potrebuje interaktívne funkcie.
A v tomto príspevku sa pozrieme na jednu z poskytnutých funkcií widgetu Datepicker.
Pokúsime sa naučiť, ako prispôsobiť tému kalendára, aby ste mohli vytvoriť vlastnú tému, ktorá bude zodpovedať vášmu celkovému dizajnu. Avšak, potrebujete trochu porozumenia v jazyku JavaScript a oboznámenie sa s CSS skôr, ako budete pokračovať v tomto výučbe.
- demonštrácie
- Stiahnuť zdroj
Ak ste pripravení, začnime.
Aktíva
Pripravime si niektoré základné veci pre kalendár.
Po prvé, návrh kalendára sa bude odvolávať na tento súbor PSD od prémiových pixelov. Takže by sme si ho mali najskôr stiahnúť, aby nám pomohli vziať vzorku farieb, ktoré potrebujeme. Potom stiahnite dva vzory z jemný vzory ktoré budeme používať ako pozadie nášho kalendára. V tomto príklade sme sa rozhodli použiť nasledujúce vzory: čierny denim a tmavú kožu.
Budeme tiež potrebovať nástroj pre vývoj webových aplikácií, ako je Firebug, na kontrolu tried prvkov / identifikátorov idov vytvorených používateľským rozhraním jQuery.
Myslím, že máme dostatok prípravy. Teraz prejdime na prvý krok.
Krok 1: jQuery UI Datepicker
Najprv prejdite na stránku na prevzatie jQuery UI. Na tejto stránke vám poskytneme niekoľko možností: UI jadra, miniaplikácie, interakcie a efekty.
Mali by sme zrušte výber všetkých komponentov, pretože nepotrebujeme všetky z nich.
Potom, v Miniaplikácie v sekcii vyberte len dátumový spínač. Rozhranie jQuery automaticky vyberie základné závislosti a potom Stiahnuť ▼ súbor.
Prepojte všetky stiahnuté súbory - okrem CSS - do prázdneho dokumentu HTML:
Krok 2: Prispôsobenie nástroja Datepicker
V tomto kroku budeme nakonfigurovať zoznam dátumov s nasledujúcimi možnosťami.
Vyššie uvedený kód poskytne pokyn jQuery, aby zobrazil kalendár na prvku s DatePicker id. Takže musíme dať nasledujúce div značka s ID dátumu - v sekcii karosérie vytvoríte kalendár:
Teraz by mal byť kalendár už vygenerovaný a vyzeral takto, jednoduchý bez akýchkoľvek štýlov, ale stále má funkčnosť.
Krok 3: Styly
Teraz začneme štýl kalendára. Začneme tým, že normalizujeme všetky prvky - ako obvykle - a vytvoríme nový štýl, v tomto príklade ho pomenujem datepicker.css. Potom ich všetky prepojte s dokumentom HTML.
Potom budeme najskôr pripojiť pozadie k telu, takže náš HTML nevyzerá príliš jasne.
body background: url ('... /img/darkdenim3.png') opakovať 0 0 # 555; Ďalej budeme špecifikovať šírku dátumu, umiestniť ju do stredu a pridať tieňový stĺp, aby sme získali efekt sýtosti na kalendár.
.ui-datepicker šírka: 216px; výška: auto; okraj: 5px auto 0; písmo: 9pt Arial, sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba (0, 0, 0, .5); -moz-box-tieň: 0px 0px 10px 0px rgba (0, 0, 0, .5); box-tieň: 0px 0px 10px 0px rgba (0, 0, 0, .5);
Takisto odstránime predvolenú dekoráciu podčiarknutia z každej značky kotvy.
.ui-datepicker a text-dekorácia: žiadne;
Kalendár v používateľskom rozhraní jQuery je tvorený a stôl. Pridajme teda 100% šírka pre stôl, takže bude mať rovnakú maximálnu šírku ako obal vyššie; to znamená 216px
.ui-datepicker tabuľka šírka: 100%;
Styling sekcie hlavičky
Časovač má sekciu hlavičky obsahujúcu Mesiac rok kalendára. Táto sekcia bude mať textúru tmavej kože, ktorú sme stiahli predtým, s mierne bielou farbou písma a 1px biely tieň v hornej časti.
.ui-datepicker-header pozadie: url ('... /img/dark_leather.png') opakovať 0 0 # 000; farba: # e0e0e0; font-weight: tučné; -webkit-box-shadow: vložiť 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-tieň: vložiť 0px 1px 1px 0px rgba (250, 250, 250, .2); box-tieň: vložiť 0px 1px 1px 0px rgba (250, 250, 250, .2); text-tieň: 1px -1px 0px # 000; filter: dropshadow (farba = # 000, offx = 1, offy = -1); line-height: 30px; šírka hranice: 1px 0 0 0; hraničný štýl: pevný; hraničná farba: # 111; Potom budeme centrovať mesiac pozície.
.ui-datepicker-title text-zarovnanie: centrum;
Nahradiť Ďalšie a Predchádzajúce text s obrázkami šípky Sprite nakrájané z PSD.
.ui-datepicker-prev, .ui-datepicker-next zobrazenie: inline-block; šírka: 30px; výška: 30px; text-align: center; kurzor: ukazovateľ; pozadie-obrázok: url ('... /img/arrow.png'); opakovanie pozadia: opakovanie; line-height: 600%; pretečenie: skryté; Potom nastavte polohu šípky.
.ui-datepicker-prev float: vľavo; pozadie pozadia: stred -30px; .ui-datepicker-next float: right; pozadie pozadia: centrum 0px;
Kým denných mien sekcia je zabalená do a thead, na základe nášho referenčného návrhu bude mať mierne biele gradienty. A aby sme zjednodušili našu úlohu, použijeme tento nástroj na vytvorenie gradientového kódu:
.ui-datepicker thead farba pozadia: # f7f7f7; obrázok-pozadie: -moz-linear-gradient (vrchol, # f7f7f7 0%, # f1f1f1 100%); pozadie-obrázok: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, # f7f7f7), farebný stop (100%, # f1f1f1)); obrázok-pozadie: -webkit-lineárny gradient (vrchol, # f7f7f7 0%, # f1f1f1 100%); obrázok na pozadí: -o-lineárny gradient (vrchol, # f7f7f7 0%, # f1f1f1 100%); obrázok na pozadí: -ms-lineárny gradient (vrchol, # f7f7f7 0%, # f1f1f1 100%); obrázok na pozadí: lineárny gradient (hore, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solid #bbb;
denných mien text bude mať tmavošedú farbu # 666666 a budú mať tiež tenkú bielu text-shadow aby ste získali lisovaný efekt.
.ui-datepicker th text-transform: veľké; veľkosť písma: 6pt; polstrovanie: 5px 0; farba: # 666666; text-tieň: 1px 0px 0px #fff; filter: dropshadow (farba = # fff, offx = 1, offy = 0);
V tomto okamihu sa kalendár zobrazí takto:
Štýlovanie dátumov
Dátumy kalendára sú zabalené td alebo tabuľkových údajov. Takže nastavíme polstrovanie na 0 odstrániť medzery medzi td a dať jej pravú hranicu 1px.
.ui-datepicker tbody td polstrovanie: 0; border-right: 1px solid #bbb;
Okrem poslednej td, ktoré nebudú mať správnu hranicu. Pre tento účel sme nastavili správny okraj na hodnotu 0.
.ui-datepicker tbody td: posledné-dieťa border-right: 0px;
Riadok tabuľky bude takmer rovnaký. Bude mať 1px hranicu s výnimkou posledného riadku.
.ui-datepicker tbody tr okraj-dolný: 1px pevný # bbb; .ui-datepicker tbody tr: posledné-dieťa border-bottom: 0px;
Štýlovanie predvoleného, kurzorového a aktívneho stavu
V tomto kroku definujeme dátumové dátumy a aktívne štýly. Najprv definujeme predvolený stav dátumu zadaním dimenzie; vycentrovať dátumovú pozíciu textu, pridať gradientovú farbu a vnútorný biely tieň.
.ui-datepicker td span, .ui-datepicker td a zobrazenie: inline-block; font-weight: tučné; text-align: center; šírka: 30px; výška: 30px; line-height: 30px; farba: # 666666; text-tieň: 1px 1px 0px #fff; filter: dropshadow (farba = # fff, offx = 1, offy = 1); .ui-datepicker-kalendár .ui-state-default background: #ededed; pozadie: -moz-lineárny gradient (top, #ededed 0%, #dedede 100%); pozadie: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, # ededed), farebný stop (100%, # dedede)); pozadie: -webkit-linear-gradient (top, #ededed 0%, # dedede 100%); pozadie: -o-lineárny-gradient (top, #ededed 0%, # dedede 100%); pozadie: -ms-line-gradient (vrchol, #ededed 0%, # dedede 100%); pozadie: lineárny gradient (hore, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: vložka 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-tieň: vložiť 1px 1px 0px 0px rgba (250, 250, 250, .5); box-tieň: vložka 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default pozadie: # f4f4f4; farba: # b4b3b3;
Keď prejdete nad daným dátumom, bude mierne biele.
.ui-datepicker-calendar .ui-state-hover background: # f7f7f7;
Keď je dátum v aktívnom stave, bude mať tieto štýly.
.ui-datepicker-kalendár .ui-state-active pozadie: # 6eafbf; -webkit-box-shadow: vložiť 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: vložiť 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: vložiť 0px 0px 10px 0px rgba (0, 0, 0, .1); farba: # e0e0e0; text-tieň: 0px 1px 0px # 4d7a85; filter: dropshadow (farba = # 4d7a85, offx = 0, offy = 1); hranica: 1px pevná # 55838f; pozícia: relatívna; margin: -1px;
Teraz by mal kalendár vyzerať oveľa lepšie.
Upevnenie pozície
V tomto okamihu si pozorne prečítajte dátum. Keď kliknete na dátum v prvom alebo poslednom stĺpci, všimnete si, že aktívny stav pretekajúci pixel z okraja kalendára.
Takže tu urobíme nejaké malé opravy.
Najprv znížime šírku dátumu na 29px, a nastavte pravý okraj posledného stĺpca a ľavý okraj prvého stĺpca 0 na zvrátenie -1px rozpätie, ktoré sme nastavili predtým pre aktívny stav.
.ui-datepicker-kalendár td: prvý-dieťa .ui-state-aktívne šírka: 29px; margin-left: 0; .ui-datepicker-kalendár td: posledný-dieťa.-state-aktívne šírka: 29px; margin-right: 0;
Dátum na poslednom riadku kalendára bude mať podobnú úpravu.
.ui-datepicker-kalendár tr: posledné-dieťa .ui-state-active height: 29px; margin-bottom: 0;
Teraz sa pozrime na výsledok. No, kalendár teraz vyzerá krásne a dokonale sa hodí k nášmu referenčnému návrhu. A môžete vidieť demo a prevziať zdroj na preskúmanie kódu z odkazov pod obrázkom.
- demonštrácie
- Stiahnuť zdroj
Bonus: Rozšírte kalendár
No, dnes sme sa naučili veľa o tom, ako vytvoriť vlastnú tému pre jQuery UI Datepicker. Ale tu by ste sa nemali zastaviť, pretože stále existuje veľa vecí, ktoré môžu byť od tohto dátumu vymenené. V závislosti od jQuery a CSS kompetencie rozšíríte takýto kalendár - zadávanie textu pomocou overlay datepicker.
- demonštrácie
- Stiahnuť zdroj
Ďalšie čítanie
Pre ďalšie čítanie na jQuery UI. Tu si môžete prečítať kompletnú dokumentáciu:
- Začíname s používateľským rozhraním jQuery
- Užívateľské rozhranie
- jQuery UI: Triedy API Theming
Záverečné myšlienky
Ďakujem vám, že ste si prečítali tento návod a po jeho príprave, dúfam, že to bude užitočné. A ak máte akúkoľvek spätnú väzbu alebo by ste chceli doplniť veci, ktoré by z tohto tutoriálu mohli chýbať, neváhajte to uviesť v sekcii komentárov nižšie. Ešte raz ďakujem).
