Jak přizpůsobit a Theming jQuery UI Datepicker
jQuery UI je prostě úžasné a díky snadnému používání je populární a široce používané téměř na každé webové stránce, která potřebuje interaktivní funkce.
V tomto příspěvku se podíváme na jednu z nabízených funkcí, widgetu Datepicker.
Budeme se snažit naučit se přizpůsobit motiv kalendáře tak, abyste si mohli vytvořit vlastní motiv, který bude odpovídat vašemu celkovému designu. Potřebujete však trochu porozumění v JavaScriptu a obeznámenost s CSS, než budete sledovat tento návod.
- Demo
- Stáhněte si zdroj
Pokud jste připraveni, začněme.
Aktiva
Pojďme si připravit některá základní aktiva pro kalendář.
Za prvé, design kalendáře bude odkazovat na tento soubor PSD z Premium Pixels. Měli bychom si ho nejprve stáhnout, aby nám pomohl vzít vzorek barev, které potřebujeme. Pak si stáhněte dva vzory z Jemné Vzory které použijeme jako pozadí našeho kalendáře. V tomto příkladu jsme se rozhodli použít následující vzory: černou džínovinu a tmavou kůži.
Také budeme potřebovat webový vývojový nástroj, jako je Firebug, pro kontrolu tříd elementů / ids generovaných uživatelským rozhraním jQuery.
Myslím, že jsme měli dost přípravy. Pojďme nyní k prvnímu kroku.
Krok 1: jQuery UI Datepicker
Nejprve přejděte na stránku ke stažení jQuery UI. Na této stránce se zobrazí několik možností, jak je uvedeno níže; UI jádro, widgety, interakce a efekty.
Měli bychom zrušte výběr všech komponent, protože všechny nepotřebujeme.
Pak, v Widgety sekce vyberte pouze datapicker. Uživatelské rozhraní jQuery automaticky vybere základní závislosti a poté stažení soubor.
Propojte všechny stažené soubory - kromě CSS - do prázdného dokumentu HTML následovně:
Krok 2: Přizpůsobení nástroje Datepicker
V tomto kroku nastavíme datapicker s následujícími volbami.
Výše uvedený kód bude instruovat jQuery, aby zobrazoval kalendář na prvku s datepicker id. Musíme tedy uvést následující div tag s - datepicker ID - v sekci těla pro vytvoření kalendáře:
Nyní by měl být kalendář již vytvořen a vypadat takto, prostý bez jakýchkoli stylů, ale stále má funkčnost.
Krok 3: Styly
Začněme stylingem kalendáře. Začneme normalizací všech prvků - jako obvykle - a vytvořením nové šablony stylů. datepicker.css. Poté je všechny propojte s dokumentem HTML.
Poté nejprve připojíme pozadí k tělu, takže náš HTML nevypadá příliš jasně.
body background: url ('… /img/darkdenim3.png') opakování 0 0 # 555; Dále určíme šířku datapickera, umístíme jej do středu a přidáme stínový stín, který dáme kalendáři prominece efekt.
.ui-datepicker width: 216px; výška: auto; okraj: 5px auto 0; písmo: 9pt Arial, sans-serif; -webk-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);
Výchozí dekorace podtržení odstraníme také z každé kotevní značky.
.ui-datepicker a text-decoration: none;
Kalendář v uživatelském rozhraní jQuery je tvořen znakem a stůl. Tak, přidejme 100% šířka pro stůl, takže bude mít stejnou maximální šířku jako obal; to je 216px
.ui-datepicker tabulka width: 100%;
Styling sekce Header
Datapicker má sekci záhlaví obsahující Měsíc rok kalendáře. Tato sekce bude mít tmavou texturu kůže, kterou jsme si stáhli, s jemně bílou barvou písma a 1px bílý stín nahoře.
.ui-datepicker-header background: url ('… /img/dark_leather.png') opakování 0 0 # 000; barva: # e0e0e0; font-weight: tučné; -webk-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: vložka 0px 1px 1px 0px rgba (250, 250, 250, .2); text-shadow: 1px -1px 0px # 000; filtr: dropshadow (barva = # 000, offx = 1, offy = -1); výška řádku: 30px; border-width: 1px 0 0 0; hraniční styl: pevná; border-color: # 111; Dále se zaměřme Měsíc pozice.
.ui-datepicker-title text-align: center;
Nahradit další a Předchozí text s obrázky sprite šipky nakrájené z PSD.
.ui-datepicker-prev, .ui-datepicker-next zobrazení: inline-block; šířka: 30px; výška: 30px; zarovnání textu: střed; kurzor: ukazatel; background-image: url ('… /img/arrow.png'); background-repeat: no-repeat; výška řádku: 600%; přetečení: skryté; Poté nastavte polohu šipky.
.ui-datepicker-prev float: vlevo; Pozice pozadí: střed -30px; .ui-datepicker-next float: right; Pozice pozadí: střed 0px;
Zatímco jména sekce je zabalena uvnitř thead, na základě našeho referenčního návrhu bude mít mírně bílý gradient. Pro zjednodušení našeho úkolu použijeme tento nástroj pro generování kódu přechodu:
.ui-datepicker thead background-color: # f7f7f7; pozadí-obraz: -moz-lineární gradient (horní, # f7f7f7 0%, # f1f1f1 100%); background-image: -webk-gradient (lineární, levý horní, levý dolní, barevný stop (0%, # f7f7f7), barevný stop (100%, # f1f1f1)); background-image: -webkit-lineární gradient (horní, # f7f7f7 0%, # f1f1f1 100%); pozadí-obraz: -o-lineární gradient (horní, # f7f7f7 0%, # f1f1f1 100%); pozadí-obraz: -ms-lineární gradient (horní, # f7f7f7 0%, # f1f1f1 100%); background-image: lineární gradient (horní, # f7f7f7 0%, # f1f1f1 100%); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); hraniční dno: 1px pevné #bbb;
jména text bude mít tmavě šedou barvu # 666666 a budou mít také tenkou bílou barvu textového stínu aby se dosáhlo stlačeného účinku.
.ui-datepicker th text-transform: uppercase; velikost písma: 6pt; výplň: 5px 0; barva: # 666666; text-shadow: 1px 0px 0px #fff; filtr: dropshadow (barva = # fff, offx = 1, offy = 0);
V tomto okamžiku bude kalendář vypadat takto:
Styling Data
Data kalendáře jsou zabalena uvnitř td nebo data tabulky. Takže nastavíme polstrování na 0 odstranit mezery mezi td a dát jí pravý okraj 1px.
.ui-datepicker tbody td padding: 0; border-right: 1px pevná #bbb;
Až na poslední td, které nebudou mít pravý okraj. Za tímto účelem nastavíme pravý okraj na 0.
.ui-datepicker tbody td: poslední dítě border-right: 0px;
Řádek tabulky bude téměř stejný. Bude mít 1px hraniční dno s výjimkou posledního řádku.
.ui-datepicker tbody tr border-bottom: 1px pevná #bbb; .ui-datepicker tbody tr: last-child border-bottom: 0px;
Styling Default, Hover a Active State
V tomto kroku definujeme datum přechodu a aktivní styly. Nejdříve definujeme výchozí stav data zadáním kóty; umístěte pozici textu data, přidejte barvu přechodu a vnitřní bílý stín.
.ui-datepicker td span, .ui-datepicker td a zobrazení: inline-block; font-weight: tučné; zarovnání textu: střed; šířka: 30px; výška: 30px; výška řádku: 30px; barva: # 666666; text-shadow: 1px 1px 0px #fff; filtr: dropshadow (barva = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default background: #ededed; pozadí: -moz-lineární gradient (top, #ededed 0%, #dedede 100%); pozadí: -webk-gradient (lineární, levý horní, levý dolní, barevný stop (0%, # ededed), color-stop (100%, # dedede)); pozadí: -webkit-lineární-gradient (top, #ededed 0%, # dedede 100%); pozadí: -o-lineární gradient (top, #ededed 0%, # dedede 100%); pozadí: -ms-linear-gradient (top, #ededed 0%, # dedede 100%); pozadí: lineární gradient (horní, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webk-box-shadow: inset 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: vložený 1px 1px 0px 0px rgba (250, 250, 250, .5); box-shadow: vložka 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default pozadí: # f4f4f4; barva: # b4b3b3;
Když přejdete nad datum, změní se na mírně bílou.
.ui-datepicker-calendar .ui-state-hover pozadí: # f7f7f7;
Když je datum v aktivním stavu, bude mít následující styly.
.ui-datepicker-calendar .ui-state-active pozadí: # 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); barva: # e0e0e0; textový stín: 0px 1px 0px # 4d7a85; filtr: dropshadow (barva = # 4d7a85, offx = 0, offy = 1); ohraničení: 1px pevná # 55838f; poloha: relativní; marže: -1px;
Nyní by měl kalendář vypadat mnohem lépe.
Stanovení polohy
V tomto okamžiku se pozorně podívejte na datum. Když kliknete na datum v prvním nebo posledním sloupci, zjistíte, že aktivní stav přetéká pixel z hrany kalendáře.
Takže tady budeme dělat nějaké drobné opravy.
Nejprve snížíme šířku data na 29px, a nastavte pravý okraj posledního sloupce a levý okraj prvního sloupce na 0 pro obrácení -1px marže, kterou jsme dříve nastavili pro aktivní stav.
.ui-datepicker-calendar td: first-child .ui-state-active šířka: 29px; margin-left: 0; .ui-datepicker-calendar td: last-child .ui-state-active šířka: 29px; pravý okraj: 0;
Podobná léčba bude mít i datum na posledním řádku kalendáře.
.ui-datepicker-calendar tr: poslední-dítě .ui-state-active výška: 29px; margin-bottom: 0;
Podívejme se na výsledek. Kalendář nyní vypadá krásně a perfektně zapadá do našeho designu. A můžete si prohlédnout demo a stáhnout zdroj ke kontrole kódu z odkazů pod obrázkem.
- Demo
- Stáhněte si zdroj
Bonus: Rozšiřte kalendář
No, dnes jsme se hodně dozvěděli, jak vytvořit vlastní motiv pro jQuery UI Datepicker. Ale neměli byste se tady zastavit, protože je zde ještě mnoho věcí, které lze rozšířit z tohoto datapickera. V závislosti na vašich schopnostech jQuery a CSS můžete rozšířit kalendář tak, aby byl takový - textový vstup s překrytím datepicker.
- Demo
- Stáhněte si zdroj
Další čtení
Pro další čtení na jQuery UI. Kompletní dokumentaci si můžete přečíst zde:
- Začínáme s uživatelským rozhraním jQuery
- Theming jQuery UI
- jQuery UI: Theming API třídy
Závěrečné myšlenky
Děkuji za čtení a následnou konzultaci, doufám, že to považujete za užitečné. A pokud máte nějakou zpětnou vazbu nebo byste chtěli přidat věci, které by mohly chybět v tomto tutoriálu, neváhejte jej uvést do komentáře níže. Ještě jednou děkuji).
