Головна » Кодування » Як налаштувати і Темінг JQuery UI Datepicker

    Як налаштувати і Темінг 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

    Заключні думки

    Дякуємо вам за читання і наступний цей підручник, сподіваюся, ви знайдете його корисним. І, якщо у вас є які-небудь відгуки або хочете додати речі, які можуть бути відсутні в цьому підручнику, не соромтеся вказати це в розділі коментарів нижче. Знову дякую).