Як налаштувати і Темінг JQuery UI Datepicker
Інтерфейс jQuery просто приголомшливий і завдяки простоті використання він користується популярністю і широко використовується практично на будь-якому веб-сайті, який потребує інтерактивних функцій.
І в цій публікації ми розглянемо одну з функцій, що надаються, віджет Datepicker.
Ми спробуємо дізнатися, як налаштувати тему календаря, щоб ви могли створити власну тему, яка буде відповідати вашому загальному дизайну. Тим не менш, вам потрібно трохи розуміння JavaScript і знайомство з CSS, перш ніж слідувати цьому підручнику.
- Демо
- Завантажити джерело
Якщо ви готові, давайте почнемо.
Активи
Давайте підготуємо деякі основні засоби для календаря.
По-перше, дизайн календаря буде посилатися на цей файл PSD з Premium Pixels. Отже, краще завантажити його спочатку, щоб допомогти нам взяти зразок потрібних нам кольорів. Потім завантажте два шаблони з Тонкий Шаблони що ми будемо використовувати як фон нашого календаря. У цьому прикладі ми вирішили використовувати наступні візерунки: чорна джинсова тканина і темна шкіра.
Нам також знадобиться інструмент веб-розробки, як Firebug, для перевірки класів / ідентифікаторів елементів, створених інтерфейсом jQuery.
Ну, я думаю, у нас було достатньо підготовки. Тепер перейдемо до першого кроку.
Крок 1: jQuery UI Datepicker
По-перше, перейдіть на сторінку завантаження JQuery UI. На цій сторінці ви знайдете кілька варіантів, як показано нижче; Core UI, віджети, взаємодії та ефекти.
Ми повинні скасуйте виділення з усіх компонентів, тому що нам не потрібні всі вони.
Потім, в Віджети в розділі виберіть лише дату вибору дати. Інтерфейс jQuery автоматично вибере необхідні залежності, а потім завантажити файл.
Пов'яжіть всі завантажені файли - крім CSS - у ваш порожній документ HTML, а саме:
Крок 2. Налаштування Datepicker
На цьому кроці ми налаштуємо вибір дати з наступними параметрами.
Вищевказаний код дасть команду jQuery відобразити календар з елементом datepicker id. Отже, нам потрібно поставити наступне div тег з - datepicker ID - у розділі тіла для формування календаря:
Тепер календар вже повинен бути згенерований і виглядатиме так, рівно без стилів, але все ще має функціональність.
Крок 3: Стилі
Тепер почнемо стайлінг календаря. Ми почнемо, нормалізуючи всі елементи - як звичайно - і створюючи нову таблицю стилів, у цьому прикладі я називаю його datepicker.css. Потім з'єднайте їх усі з HTML-документом.
Потім ми спочатку додамо до тіла фон, щоб наш HTML не виглядав занадто просто.
body background: url ('… /img/darkdenim3.png') повторіть 0 0 # 555; Далі ми визначимо ширину вибору дати, розташуємо її до центру та додаємо тінь, щоб надати ефект змінювання календарем.
.ui-datepicker ширина: 216px; висота: авто; margin: 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 text-decoration: none;
Календар у jQuery UI формується за допомогою a таблиці. Отже, додамо 100% ширина для таблиці, таким чином, вона матиме максимальну ширину, що й обгортка вище; це 216px
.таблиця ui-datepicker ширина: 100%;
Стилізація розділу заголовка
Засіб вибору дати містить розділ заголовка Місяць і рік календаря. Цей розділ буде мати темно-шкіряну текстуру, яку ми завантажили раніше, з білим кольором шрифтів і 1px біла тінь на вершині.
.ui-datepicker-header background: url ('… /img/dark_leather.png') повторює 0 0 # 000; колір: # e0e0e0; font-weight: bold; -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 текст-вирівнювання: центр;
Замінити Далі і Поперед текст із зображенням стрілки спрайту, нарізаного з PSD.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; ширина: 30px; висота: 30px; text-align: center; курсор: покажчик; background-image: url ('… /img/arrow.png'); фон-повтор: без повтору; висота лінії: 600%; переповнення: приховано; Потім відрегулюйте позицію стрілки відповідно.
.ui-datepicker-prev float: left; фонове положення: центр -30px; .ui-datepicker-next float: right; фонове положення: центр 0px;
Поки назв днів Розділ обгортається в межах той, на основі нашого дизайну посилання, він буде мати трохи білий градієнт. І, щоб спростити наше завдання, ми використаємо цей інструмент для створення коду градієнта:
.ui-datepicker thead background-color: # f7f7f7; background-image: -moz-лінійний градієнт (зверху, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-градієнт (лінійний, лівий верхній, лівий нижній, колір-стоп (0%, # f7f7f7), колір-стоп (100%, # f1f1f1)); background-image: -webkit-лінійний градієнт (top, # 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); border-bottom: 1px твердий # bbb;
The назв днів текст буде мати темно-сірий колір # 666666 і вони також матимуть тонкий білий колір text-shadow щоб надати йому ефект натискання.
.ui-datepicker th text-transform: верхній регістр; розмір шрифту: 6pt; заповнення: 5px 0; колір: # 666666; текстова тінь: 1px 0px 0px #fff; filter: dropshadow (колір = # fff, offx = 1, offy = 0);
Наразі календар буде виглядати так:
Стайлинг дат
У календарі завершуються календарні дати td або таблиці даних. Отже, ми встановимо додатку до 0 щоб видалити пробіли між td і надайте йому правий кордон 1px.
.ui-datepicker tbody td заповнення: 0; правий край: 1px твердий # bbb;
За винятком останнього td, які не матимуть права кордону. Для цього ми встановили правий кордон до 0.
.ui-datepicker tbody td: остання дитина прикордонний правий: 0px;
Рядок таблиці буде майже однаковим. Він матиме нижню границю 1px, за винятком останнього рядка.
.ui-datepicker tbody tr кордон-дно: 1px твердий # bbb; .ui-datepicker tbody tr: останнє-дитяче border-bottom: 0px;
Стилізація за умовчанням, наведення і активного стану
На цьому кроці ми визначимо наведені дати та активні стилі. Спочатку визначимо стан за умовчанням, вказавши розмірність; центруйте положення тексту тексту, додайте колір градієнта та внутрішню білу тінь.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; font-weight: bold; text-align: center; ширина: 30px; висота: 30px; висота рядка: 30px; колір: # 666666; текстова тінь: 1px 1px 0px #fff; filter: dropshadow (колір = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default background: #ededed; background: -moz-linear-gradient (верхній, #ededed 0%, #dedede 100%); background: -webkit-gradient (лінійний, лівий верхній, лівий нижній, колір-стоп (0%, # ededed), колір-стоп (100%, # dedede)); background: -webkit-linear-gradient (зверху, #ededed 0%, # dedede 100%); фон: -o-лінійний градієнт (верхній, #ededed 0%, # dedede 100%); background: -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 background: # f4f4f4; колір: # b4b3b3;
Коли ви наведете курсор миші на дату, він перетвориться на білу.
.ui-datepicker-calendar .ui-state-hover background: # f7f7f7;
Коли дата знаходиться в активному стані, вона матиме наступні стилі.
.ui-datepicker-calendar .ui-state-active background: # 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; текстова тінь: 0px 1px 0px # 4d7a85; filter: dropshadow (колір = # 4d7a85, offx = 0, offy = 1); кордон: 1px твердий # 55838f; позиція: відносна; запас: -1px;
Тепер календар має виглядати набагато краще.
Виправлення позиції
На даний момент уважно подивіться на дату. Коли ви натискаєте дату в першому або останньому стовпці, ви помітите, що активний стан переповнює піксель від краю календаря.
Отже, ми зробимо деякі невеликі виправлення.
Спочатку ми зменшимо ширину дати на 29px, і встановити правий край останнього стовпця і лівого поля першого стовпця 0 повернути назад -1px маржа ми встановили раніше для активного стану.
.ui-datepicker-календар td: перша дитина .ui-state-active width: 29px; margin-left: 0; .ui-datepicker-календар td: остання дитина .ui-state-active ширина: 29px; margin-right: 0;
Датою останнього ряду календаря буде також подібна обробка.
.ui-datepicker-calendar tr: останній дочір .ui-state-active висота: 29px; margin-bottom: 0;
Тепер давайте побачимо результат. Ну, тепер календар виглядає красиво і ідеально підходить для нашого дизайну. Крім того, ви можете побачити демо-версію і завантажити джерело, щоб переглянути код з посилань під зображенням.
- Демо
- Завантажити джерело
Бонус: розширити календар
Добре, сьогодні ми дізналися досить багато про те, як створити власну тему для JQuery UI Datepicker. Але ви не повинні зупинятися тут, так як є ще багато речей, які можна розширити з цього вибору. Залежно від вашого jQuery і CSS знань, ви розширюєте календар, щоб бути таким - введення тексту з накладною.
- Демо
- Завантажити джерело
Подальше читання
Для подальшого читання на jQuery UI. Прочитайте повну документацію тут:
- Початок роботи з інтерфейсом jQuery
- Темінг інтерфейсу jQUery
- jQuery UI: Класи Theming API
Заключні думки
Дякуємо вам за читання і наступний цей підручник, сподіваюся, ви знайдете його корисним. І, якщо у вас є які-небудь відгуки або хочете додати речі, які можуть бути відсутні в цьому підручнику, не соромтеся вказати це в розділі коментарів нижче. Знову дякую).
