Как да персонализиране и Theming jQuery UI Datepicker
jQuery UI е просто страхотно и поради лесната употреба, той е популярен и широко използван в почти всеки уебсайт, който се нуждае от интерактивни функции.
И в тази публикация ще разгледаме една от предоставените функции - притурката Datepicker.
Ще се опитаме да научим как да персонализираме темата на календара, така че да можете да създадете своя собствена тема, която да съответства на цялостния ви дизайн. Въпреки това, имате нужда от малко разбиране в JavaScript и познаване на CSS, преди да следвате този урок.
- Демонстрация
- Изтеглете Източник
Ако сте готови, нека започнем.
Активите
Нека да подготвим някои от основните активи за календара.
Първо, дизайнът на календара ще се отнася за този PSD файл от Premium Pixels. Затова е по-добре да го изтеглите първо, за да ни помогнете да вземем примерни цветове, от които се нуждаем. След това изтеглете два модела от изтънчен Модели които ще използваме като фон на нашия календар. В този пример решихме да използваме следните модели: черен деним и тъмна кожа.
Ние също ще се нуждаем от инструмент за уеб разработки като Firebug, за да инспектираме класовете елементи / ids, генерирани от jQuery UI.
Е, мисля, че имахме достатъчно подготовка. Сега да преминем към първата стъпка.
Стъпка 1: jQuery UI Datepicker
Първо отидете на страницата за изтегляне на jQuery UI. На тази страница ще бъдат представени няколко опции, както следва; UI Core, Widgets, Interactions и Effects.
Ние трябва премахнете избора на всички компоненти, тъй като не ни трябват всички.
След това, в Widgets изберете само полето за избиране на дата. Потребителският интерфейс на jQuery автоматично ще избере основните зависимости и след това Изтегли файлът.
Свържете всички изтеглени файлове - с изключение на CSS - към празния документ на HTML, както следва:
Стъпка 2: Персонализиране на Datepicker
В тази стъпка ще конфигурираме избивач за дата със следните опции.
Горният код ще инструктира jQuery да показва календара на елемент с datepicker документ за самоличност. Така че, трябва да поставим следното Разделение маркер с - datepicker ID - в секцията тяло за формиране на календара:
Сега календарът вече трябваше да се генерира и да изглежда така, обикновен без никакви стилове, но все още има функционалност.
Стъпка 3: Стиловете
Сега да започнем да оформяме календара. Ще започнем с нормализиране на всички елементи - както обикновено - и създаване на нов стилов лист, в този пример го наричам datepicker.css. След това ги свържете с HTML документа.
След това първо ще прикачим фона на тялото, така че нашият HTML да не изглежда твърде обикновен.
body background: url ('… /img/darkdenim3.png') повторете 0 0 # 555; След това ще определим ширината на полето за дата, поставете го в центъра и добавете сянка, за да придадете ефект на промените в календара..
.ui-datepicker ширина: 216px; височина: автоматично; марж: 5px auto 0; шрифт: 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);
Също така ще премахнем подразбиращата се подложка за подложка от всеки етикет.
.ui-datepicker a текст-декорация: няма;
Календарът в jQuery UI се формира с a маса. Така че нека добавим 100% ширина на. \ t маса, така че ще има същата максимална ширина като обвивката по-горе; това е 216px
.ui-datepicker таблица ширина: 100%;
Оформяне на секцията за глава
В полето Datepicker има заглавна част, съдържаща Месец година на календара. Този раздел ще има тъмната кожена текстура, която сме изтеглили преди с леко бял цвят на шрифта и 1 пиксел бяла сянка на върха.
.ui-datepicker-header фон: url ('… /img/dark_leather.png') повтаря 0 0 # 000; цвят: # e0e0e0; тегло на шрифта: удебелен; -webkit-box-shadow: вмъкване 0px 1px 1px 0px rgba (250, 250, 250, 2); -moz-box-shadow: вмъкване 0px 1px 1px 0px rgba (250, 250, 250, .2); box-shadow: вмъкване 0px 1px 1px 0px rgba (250, 250, 250, .2); текстова сянка: 1px -1px 0px # 000; филтър: dropshadow (цвят = # 000, offx = 1, offy = -1); височина на линията: 30px; border-width: 1px 0 0 0; граничен стил: твърдо; border-color: # 111; След това нека да центрираме месец позиция.
.ui-datepicker-title text-align: център;
Заменете Следващия и Предишна текст с изображенията на стрелката, изрязани от PSD.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; ширина: 30px; височина: 30px; text-align: center; курсор: указател; background-image: url ('… /img/arrow.png'); фон-повторение: не се повтаря; височина на линията: 600%; overflow: hidden; След това регулирайте съответно стрелката.
.ui-datepicker-prev float: left; фонова позиция: център -30px; .ui-datepicker-next float: right; фонова позиция: център 0px;
Докато имена на дни разделът е опакован в рамките на a врекламния, въз основа на нашата проектна референция, тя ще има леко бял градиент. За да опростим задачата си, ще използваме този инструмент, за да генерираме градиен код:
.ui-datepicker thead цвят на фона: # f7f7f7; background-image: -moz-linear-gradient (отгоре, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-gradient (линеен, ляв отгоре, ляво долу, цветен стоп (0%, # f7f7f7), цветен стоп (100%, # f1f1f1)); background-image: -webkit-линеен градиент (отгоре, # f7f7f7 0%, # f1f1f1 100%); background-image: -o-линеен градиент (отгоре, # f7f7f7 0%, # f1f1f1 100%); background-image: -ms-linear-gradient (отгоре, # f7f7f7 0%, # f1f1f1 100%); background-image: линеен градиент (отгоре, # f7f7f7 0%, # f1f1f1 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); граница отдолу: 1px твърдо # bbb;
Най- имена на дни текстът ще има тъмно сив цвят на # 666666 и те също ще имат тънко бяло текстови сянка за да му се придаде натиснат ефект.
.ui-datepicker th текстово преобразуване: главни; размер на шрифта: 6pt; пълнеж: 5px 0; цвят: # 666666; текстова сянка: 1px 0px 0px #fff; филтър: dropshadow (цвят = # fff, offx = 1, offy = 0);
В този момент календарът ще изглежда така:
Стайлинг на датите
Датите в календара са опаковани в нея TD или таблични данни. Така че, ще поставим подложката на 0 за да премахнете интервалите между TD и му дайте дясна граница от 1 пиксела.
.ui-datepicker tbody td подложка: 0; border-right: 1px твърдо # bbb;
С изключение на последните TD, която няма да има права граница. Зададохме правилната граница на 0.
.ui-datepicker tbody td: последно дете border-right: 0px;
Редът на таблицата ще бъде почти същият. Тя ще има 1px гранично дъно, с изключение на последния ред.
.ui-datepicker tbody tr граница-дъно: 1px твърдо # bbb; .ui-datepicker tbody tr: последно дете border-bottom: 0px;
Оформяне по подразбиране, Hover и активно състояние
В тази стъпка ще дефинираме датите на навигация и активните стилове. Първо ще дефинираме състоянието по подразбиране за датата, като посочим измерението; центрирайте позицията за датата, добавете цвят на градиента и вътрешната бяла сянка.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; тегло на шрифта: удебелен; text-align: center; ширина: 30px; височина: 30px; височина на линията: 30px; цвят: # 666666; текстова сянка: 1px 1px 0px #fff; филтър: dropshadow (цвят = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default фон: #ededed; background: -moz-linear-gradient (отгоре, #ededed 0%, #dedede 100%); background: -webkit-gradient (линеен, ляв отгоре, ляво долу, цветен стоп (0%, # ededed), стоп-цвят (100%, # dedede)); фон: -webkit-linear-gradient (отгоре, #ededed 0%, # dedede 100%); фон: -о-линеен градиент (отгоре, #ededed 0%, # dedede 100%); фон: -ms-linear-gradient (отгоре, #ededed 0%, # dedede 100%); фон: линеен градиент (отгоре, #ededed 0%, # dedede 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed", endColorstr = "# dedede", GradientType = 0); -webkit-box-shadow: вмъкване 1px 1px 0px 0px rgba (250, 250, 250, .5); -moz-box-shadow: вмъкване 1px 1px 0px 0px rgba (250, 250, 250, .5); box-shadow: вмъкване 1px 1px 0px 0px rgba (250, 250, 250, .5); .ui-datepicker-unselectable .ui-state-default фон: # f4f4f4; цвят: # b4b3b3;
Когато задържите мишката върху датата, тя ще се превърне в леко бяла.
.ui-datepicker-calendar .ui-state-hover фон: # f7f7f7;
Когато датата е в активно състояние, тя ще има следните стилове.
.ui-datepicker-calendar .ui-state-active фон: # 6eafbf; -webkit-box-shadow: вмъкване 0px 0px 10px 0px rgba (0, 0, 0, .1); -moz-box-shadow: вмъкване 0px 0px 10px 0px rgba (0, 0, 0, .1); box-shadow: вмъкване 0px 0px 10px 0px rgba (0, 0, 0, .1); цвят: # e0e0e0; text-shadow: 0px 1px 0px # 4d7a85; филтър: dropshadow (цвят = # 4d7a85, offx = 0, offy = 1); граница: 1px твърдо # 55838f; позиция: относителна; марж: -1px;
Сега календарът трябва да изглежда много по-добре.
Определяне на позицията
В този момент погледнете внимателно датата. Когато кликнете върху датата в първата или в последната колона, ще забележите, че активното състояние препълва пиксел от края на календара.
Така че тук ще направим някои малки поправки.
Първо ще намалим ширината на датата на 29px, и задайте дясното поле на последната колона и лявото поле на първата колона 0 да се обърне -1 пиксел марж, който сме задали преди това за активното състояние.
.ui-datepicker-calendar td: първо дете .ui-state-active width: 29px; margin-left: 0; .ui-datepicker-календар td: последно дете .ui-state-active width: 29px; margin-right: 0;
Датата в последния ред на календара също ще има подобно третиране.
.ui-datepicker-calendar tr: последно дете .ui-state-active height: 29px; margin-bottom: 0;
Сега да видим резултата. Е, календарът сега изглежда красив и се вписва перфектно като референтен дизайн. Можете да видите демото и да изтеглите източника, за да разгледате кода от връзките под изображението.
- Демонстрация
- Изтеглете Източник
Бонус: Разширете календара
Е, днес сме научили много за това как да създадем персонализирана тема за JQuery UI Datepicker. Но не бива да спирате тук, тъй като все още има много неща, които могат да бъдат разширени от този списък. В зависимост от вашите jQuery и CSS умения, разширявате календара така - въвеждането на текст с добавяне на дата.
- Демонстрация
- Изтеглете Източник
Допълнителна информация
За по-нататъшно четене на jQuery UI. Можете да прочетете пълната документация тук:
- Първи стъпки с jQuery UI
- Theming jQUery UI
- jQuery UI: Теминг API класове
Заключителни мисли
Благодаря ви, че прочетете и следвате този урок, надявам се да ви бъде полезен. И, ако имате някаква обратна връзка или бихте искали да добавите неща, които може да липсват от този урок, не се колебайте да го посочите в раздела за коментари по-долу. Благодаря отново).
