Jak dostosować i motywować datepicker jQuery UI
jQuery UI jest po prostu niesamowity i ze względu na łatwość obsługi jest popularny i szeroko stosowany w niemal każdej witrynie, która wymaga funkcji interaktywnych.
W tym poście przyjrzymy się jednej z udostępnionych funkcji, widżetowi Datepicker.
Postaramy się nauczyć, jak dostosować motyw kalendarza, dzięki czemu będziesz mógł stworzyć własny motyw, który będzie odpowiadał ogólnemu projektowi. Jednak zanim przejdziesz do tego samouczka, potrzebujesz trochę zrozumienia w JavaScript i znajomości CSS.
- Próbny
- Pobierz źródło
Jeśli jesteś gotowy, zacznijmy.
Aktywa
Przygotujmy niektóre podstawowe zasoby kalendarza.
Po pierwsze, projekt kalendarza będzie odnosił się do tego pliku PSD z Premium Pixels. Więc lepiej najpierw go pobierz, aby pomóc nam pobrać próbkę kolorów, których potrzebujemy. Następnie pobierz dwa wzory Subtelny Wzory które wykorzystamy jako tło naszego kalendarza. W tym przykładzie postanowiliśmy użyć następujących wzorów: czarny denim i ciemna skóra.
Będziemy również potrzebować narzędzia do tworzenia stron internetowych, takiego jak Firebug, do sprawdzania klas elementów / identyfikatorów generowanych przez interfejs jQuery.
Cóż, myślę, że mieliśmy wystarczająco dużo przygotowań. Przejdźmy teraz do pierwszego kroku.
Krok 1: JQuery UI Datepicker
Najpierw przejdź do strony pobierania jQuery UI. Na tej stronie pojawi się kilka opcji, jak poniżej; rdzeń interfejsu użytkownika, widgety, interakcje i efekty.
Powinniśmy odznacz wszystkie komponenty, ponieważ nie potrzebujemy ich wszystkich.
Następnie w Widgety sekcja wybierz tylko datepicker. Interfejs użytkownika jQuery automatycznie wybierze podstawowe zależności, a następnie Ściągnij plik.
Połącz wszystkie pobrane pliki - z wyjątkiem CSS - do pustego dokumentu HTML w następujący sposób:
Krok 2: Dostosowywanie datepicker
W tym kroku skonfigurujemy datepicker z następującymi opcjami.
Powyższy kod instruuje jQuery, aby wyświetlał kalendarz na elemencie za pomocą datepicker ID. Tak więc musimy umieścić następujące informacje div tag with - datepicker ID - w sekcji treści, aby utworzyć kalendarz:
Teraz kalendarz powinien być już wygenerowany i wyglądać tak, bez żadnych stylów, ale nadal ma funkcjonalność.
Krok 3: Style
Teraz zacznijmy stylizować kalendarz. Zaczniemy od normalizacji wszystkich elementów - jak zwykle - i utworzenia nowego arkusza stylów, w tym przykładzie nazywam go datepicker.css. Następnie połącz je wszystkie z dokumentem HTML.
Następnie najpierw dołączymy tło do ciała, aby nasz HTML nie wyglądał zbyt prosto.
ciało tło: url ('… /img/darkdenim3.png') powtórz 0 0 # 555; Następnie określimy szerokość datepicker, umieścimy go na środku i dodamy cień, aby nadać efekt prominece kalendarzowi.
.ui-datepicker szerokość: 216px; height: auto; margin: 5px auto 0; czcionka: 9pt Arial, bezszeryfowa; -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);
Usuniemy również domyślną dekorację podkreślenia z każdego znacznika zakotwiczenia.
.ui-datepicker a text-decoration: none;
Kalendarz w jQuery UI jest tworzony za pomocą stół. Dodajmy więc 100% szerokość dla stół, więc będzie mieć taką samą maksymalną szerokość jak opakowanie powyżej; to jest 216px
.tabela ui-datepicker szerokość: 100%;
Stylizacja sekcji nagłówka
Datepicker ma sekcję nagłówka zawierającą Miesiąc, rok kalendarza. Ta sekcja będzie miała ciemną teksturę skóry, którą pobraliśmy wcześniej z lekko białą czcionką i 1px biały cień na górze.
.ui-datepicker-header background: url ('… /img/dark_leather.png') repeat 0 0 # 000; kolor: # e0e0e0; waga czcionki: pogrubiona; -webkit-box-shadow: wstawka 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: wstawka 0px 1px 1px 0px rgba (250, 250, 250, .2); box-shadow: wstawka 0px 1px 1px 0px rgba (250, 250, 250, .2); text-shadow: 1px -1px 0px # 000; filter: dropshadow (color = # 000, offx = 1, offy = -1); line-height: 30px; border-width: 1px 0 0 0; border-style: solid; border-color: # 111; Następnie wyśrodkujmy Miesiąc pozycja.
.ui-datepicker-title text-align: center;
Zastąp Kolejny i Poprzedni tekst z obrazkami ze strzałkami sprite pociętymi z PSD.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; szerokość: 30px; wysokość: 30px; wyrównywanie tekstu: środek; cursor: pointer; background-image: url ('… /img/arrow.png'); powtórz tło: nie powtarzaj; wysokość linii: 600%; przepełnienie: ukryte; Następnie dostosuj odpowiednio pozycję strzałki.
.ui-datepicker-prev float: left; pozycja tła: środek -30px; .ui-datepicker-next float: right; pozycja tła: środek 0px;
Podczas, gdy nazwy dni sekcja jest owinięta w thead, w oparciu o nasze referencje projektowe będzie miał lekko biały gradient. Aby uprościć nasze zadanie, użyjemy tego narzędzia do wygenerowania kodu gradientu:
.ui-datepicker thead background-color: # f7f7f7; background-image: -moz-linear-gradient (góra, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, # f7f7f7), zatrzymanie koloru (100%, # f1f1f1)); background-image: -webkit-linear-gradient (góra, # f7f7f7 0%, # f1f1f1 100%); background-image: -o-linear-gradient (góra, # f7f7f7 0%, # f1f1f1 100%); background-image: -ms-linear-gradient (góra, # f7f7f7 0%, # f1f1f1 100%); background-image: linear-gradient (góra, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); border-bottom: 1px solid #bbb;
The nazwy dni tekst będzie miał ciemnoszary kolor # 666666 a także będą miały cienką biel cień tekstu dać mu wytłoczony efekt.
.ui-datepicker th text-transform: uppercase; rozmiar czcionki: 6pt; padding: 5px 0; kolor: # 666666; text-shadow: 1px 0px 0px #fff; filter: dropshadow (color = # fff, offx = 1, offy = 0);
W tym momencie kalendarz pojawi się w następujący sposób:
Stylizacja dat
Daty kalendarza są zapakowane td lub dane tabeli. Więc ustawimy dopełnienie na 0 aby usunąć spacje między td i nadaj mu prawą granicę 1px.
.ui-datepicker tbody td padding: 0; border-right: 1px solid #bbb;
Z wyjątkiem ostatniego td, który nie będzie miał prawej granicy. W tym celu ustawiamy prawą ramkę na 0.
.ui-datepicker tbody td: last-child border-right: 0px;
Wiersz tabeli będzie prawie taki sam. Będzie miał dolną krawędź 1px z wyjątkiem ostatniego wiersza.
.ui-datepicker tbody tr border-bottom: 1px solid #bbb; .ui-datepicker tbody tr: last-child border-bottom: 0px;
Stylizowanie stanu domyślnego, najechania i aktywnego
W tym kroku określimy datę i styl aktywacji. Najpierw określimy domyślny stan daty, określając wymiar; wyśrodkuj pozycję tekstu daty, dodaj kolor gradientu i wewnętrzny biały cień.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; waga czcionki: pogrubiona; wyrównywanie tekstu: środek; szerokość: 30px; wysokość: 30px; line-height: 30px; kolor: # 666666; text-shadow: 1px 1px 0px #fff; filter: dropshadow (color = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default background: #ededed; tło: -moz-linear-gradient (góra, #ededed 0%, #dedede 100%); background: -webkit-gradient (liniowy, lewy górny, lewy dolny, zatrzymanie koloru (0%, # ededed), zatrzymanie koloru (100%, # dedede)); background: -webkit-linear-gradient (góra, #ededed 0%, # dedede 100%); background: -o-linear-gradient (góra, #ededed 0%, # dedede 100%); tło: -ms-linear-gradient (góra, #ededed 0%, # dedede 100%); background: linear-gradient (top, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: wstawka 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: wstawka 1px 1px 0px 0px rgba (250, 250, 250, .5); box-shadow: wstawka 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default background: # f4f4f4; kolor: # b4b3b3;
Po najechaniu na datę zmieni się na lekko biały.
.ui-datepicker-calendar .ui-state-hover background: # f7f7f7;
Gdy data jest w stanie aktywnym, będzie miała następujące style.
.ui-datepicker-calendar .ui-state-active background: # 6eafbf; -webkit-box-shadow: wstawka 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: wstawka 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: wstawka 0px 0px 10px 0px rgba (0, 0, 0, .1); kolor: # e0e0e0; text-shadow: 0px 1px 0px # 4d7a85; filter: dropshadow (color = # 4d7a85, offx = 0, offy = 1); granica: 1px bryła # 55838f; pozycja: względna; margin: -1px;
Teraz kalendarz powinien wyglądać znacznie lepiej.
Naprawianie pozycji
W tym momencie uważnie przyjrzyj się dacie. Po kliknięciu daty w pierwszej lub ostatniej kolumnie zauważysz, że stan aktywny przepełnia piksel poza krawędzią kalendarza.
Więc tutaj zrobimy kilka drobnych poprawek.
Najpierw zmniejszymy szerokość daty do 29px, i ustaw prawy margines ostatniej kolumny i lewego marginesu pierwszej kolumny na 0 odwrócić -1px margines, który ustaliliśmy wcześniej dla stanu aktywnego.
.ui-datepicker-calendar td: first-child .ui-state-active width: 29px; margin-left: 0; .ui-datepicker-calendar td: last-child .ui-state-active width: 29px; margines prawy: 0;
Data w ostatnim wierszu kalendarza będzie również miała podobny sposób traktowania.
.ui-datepicker-calendar tr: last-child .ui-state-active height: 29px; margin-bottom: 0;
Teraz zobaczmy wynik. Cóż, kalendarz wygląda teraz pięknie i doskonale pasuje do naszego wzornictwa. I możesz zobaczyć prezentację i pobrać źródło, aby sprawdzić kod z linków pod obrazem.
- Próbny
- Pobierz źródło
Bonus: Rozszerz kalendarz
Cóż, dzisiaj sporo się nauczyliśmy, jak stworzyć własny motyw dla jQuery UI Datepicker. Ale nie powinieneś się tutaj zatrzymywać, ponieważ nadal istnieje wiele rzeczy, które można rozszerzyć z tego datepicker. W zależności od jQuery i biegłości CSS rozszerzasz kalendarz tak, aby wyglądał tak - wprowadzanie tekstu z datepickerem nakładki.
- Próbny
- Pobierz źródło
Dalsze czytanie
Więcej informacji na temat interfejsu użytkownika jQuery. Możesz przeczytać pełną dokumentację tutaj:
- Pierwsze kroki z interfejsem użytkownika jQuery
- Theming jQUery UI
- jQuery UI: Klasy API do programowania
Końcowe przemyślenia
Dziękujemy za przeczytanie i po tym samouczku mam nadzieję, że okaże się to przydatne. Jeśli masz jakieś uwagi lub chciałbyś dodać rzeczy, których może brakować w tym samouczku, możesz to zaznaczyć w sekcji komentarzy poniżej. Dzięki jeszcze raz).
