Как настроить и тематизировать jQuery UI Datepicker
Пользовательский интерфейс jQuery просто потрясающий и, благодаря простоте использования, он популярен и широко используется практически на любом веб-сайте, который нуждается в интерактивных функциях..
И в этом посте мы рассмотрим одну из предоставленных функций - виджет Datepicker..
Мы постараемся научиться настраивать тему календаря, чтобы вы могли создать собственную тему, соответствующую вашему общему дизайну. Тем не менее, вам нужно немного разбираться в JavaScript и ознакомиться с CSS, прежде чем следовать этому руководству.
- демонстрация
- Скачать исходный код
Если вы готовы, давайте начнем.
Активы
Давайте подготовим некоторые из основных активов для календаря.
Во-первых, дизайн календаря будет ссылаться на этот PSD-файл от Premium Pixels. Поэтому лучше сначала загрузить его, чтобы помочь нам взять образец цветов, которые нам нужны. Затем загрузите два шаблона из утонченный Узоры что мы будем использовать в качестве фона нашего календаря. В этом примере мы решили использовать следующие узоры: черная джинсовая ткань и темная кожа.
Нам также понадобится инструмент веб-разработки, такой как Firebug, для проверки классов / идентификаторов элементов, сгенерированных пользовательским интерфейсом jQuery..
Ну, я думаю, что у нас было достаточно подготовки. Теперь давайте перейдем к первому шагу.
Шаг 1: jQuery UI Datepicker
Сначала перейдите на страницу загрузки jQuery UI. На этой странице вам будет представлено несколько вариантов, а именно: ядро пользовательского интерфейса, виджеты, взаимодействия и эффекты.
Мы должны отмените выбор всех компонентов, поскольку нам не нужны все из них.
Затем в Виджеты В разделе выберите только указатель даты. Пользовательский интерфейс jQuery автоматически выберет необходимые зависимости, а затем скачать файл.
Ссылка на все загруженные файлы - кроме CSS - в пустой HTML-документ следующим образом:
Шаг 2: Настройка Datepicker
На этом шаге мы настроим средство выбора даты со следующими параметрами.
Приведенный выше код проинструктирует jQuery отображать календарь на элементе с DatePicker Я бы. Итак, нам нужно поставить следующее ДИВ пометьте - datepicker ID - в разделе тела, чтобы сформировать календарь:
Теперь календарь уже должен быть сгенерирован и выглядеть следующим образом, без каких-либо стилей, но все еще с функциональностью.
Шаг 3: Стили
Теперь давайте начнем стилизацию календаря. Мы начнем с нормализации всех элементов - как обычно - и создания новой таблицы стилей, в этом примере я назову ее datepicker.css. Затем свяжите их все с документом HTML.
Затем мы сначала прикрепим фон к телу, чтобы наш HTML не выглядел слишком простым.
body background: url ('… /img/darkdenim3.png') repeat 0 0 # 555; Далее мы укажем ширину указателя даты, поместим его в центр и добавим тень, чтобы придать календарному эффекту эффект промисенса..
.ui-datepicker width: 216px; высота: авто; поле: 5px авто 0; шрифт: 9pt Arial, без засечек; -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 состоит из Таблица. Итак, давайте добавим 100% ширина для Таблица, так что он будет иметь такую же максимальную ширину, как обертка выше; то есть 216px
.таблица ui-datepicker ширина: 100%;
Стилизация раздела заголовка
DatePicker имеет раздел заголовка, содержащий Месяц год календаря. Этот раздел будет иметь темную текстуру кожи, которую мы скачали ранее, с немного белым цветом шрифта и 1px белая тень наверху.
.ui-datepicker-header background: url ('… /img/dark_leather.png') repeat 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; фильтр: drophadow (цвет = # 000, offx = 1, offy = -1); высота строки: 30 пикселей; border-width: 1px 0 0 0; стиль границы: твердый; цвет границы: # 111; Далее давайте центрируем Месяц позиция.
.ui-datepicker-title text-align: center;
Заменить следующий а также Предыдущая текст с изображениями стрелок спрайтов, вырезанных из PSD.
.ui-datepicker-prev, .ui-datepicker-next display: inline-block; ширина: 30 пикселей; высота: 30 пикселей; выравнивание текста: по центру; курсор: указатель; background-image: url ('… /img/arrow.png'); повторение фона: без повтора; высота линии: 600%; переполнение: скрытое; Затем отрегулируйте положение стрелки соответственно.
.ui-datepicker-prev float: left; background-position: center -30px; .ui-datepicker-next float: right; background-position: center 0px;
В то время как названия дней раздел обернут в THEAD, основываясь на нашей модели, у него будет слегка белый градиент. И, чтобы упростить нашу задачу, мы будем использовать этот инструмент для генерации градиентного кода:
.thei-datepicker thead background-color: # f7f7f7; background-image: -moz-linear-Gradient (вверху, # f7f7f7 0%, # f1f1f1 100%); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # f7f7f7), остановка цвета (100%, # f1f1f1)); background-image: -webkit-linear-Gradient (вверху, # f7f7f7 0%, # f1f1f1 100%); фоновое изображение: -o-линейный градиент (вверху, # f7f7f7 0%, # f1f1f1 100%); background-image: -ms-linear-градиент (вверху, # f7f7f7 0%, # f1f1f1 100%); background-image: линейный градиент (вверху, # f7f7f7 0%, # f1f1f1 100%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7", endColorstr = "# f1f1f1", GradientType = 0); Граница внизу: 1px solid #bbb;
названия дней текст будет иметь темно-серый цвет # 666666 и они также будут иметь тонкий белый текст-тень придать этому эффект.
.ui-datepicker th text-transform: прописные буквы; размер шрифта: 6pt; отступы: 5px 0; цвет: # 666666; тень текста: 1px 0px 0px #fff; фильтр: drophadow (color = # fff, offx = 1, offy = 0);
На этом этапе календарь будет выглядеть так:
Стиль Даты
Календарные даты обернуты в пределах тд или данные таблицы. Итак, мы установим отступ 0 убрать пробелы между тд и дать ему правильную границу 1px.
.ui-datepicker tbody td padding: 0; border-right: 1px solid #bbb;
Кроме последнего тд, который не будет иметь правильную границу. Мы устанавливаем правую границу в 0 для этого.
.ui-datepicker tbody td: last-child border-right: 0px;
Строка таблицы будет почти такой же. У него будет граница в 1 пиксель, за исключением последнего ряда.
.ui-datepicker tbody tr border-bottom: 1px solid #bbb; .ui-datepicker tbody tr: last-child border-bottom: 0px;
Стилизация стиля по умолчанию, наведения и активного состояния
На этом шаге мы определим наведение даты и активные стили. Сначала мы определим состояние даты по умолчанию, указав размерность; центрируйте положение текста даты, добавьте цвет градиента и внутреннюю белую тень.
.ui-datepicker td span, .ui-datepicker td a display: inline-block; вес шрифта: полужирный; выравнивание текста: по центру; ширина: 30 пикселей; высота: 30 пикселей; высота строки: 30 пикселей; цвет: # 666666; тень текста: 1px 1px 0px #fff; фильтр: drophadow (color = # fff, offx = 1, offy = 1); .ui-datepicker-calendar .ui-state-default background: #ededed; background: -moz-linear-Gradient (сверху, #ededed 0%, #dedede 100%); background: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0%, # ededed), остановка цвета (100%, # dedede)); background: -webkit-linear-Gradient (сверху, #ededed 0%, # dedede 100%); фон: -o-линейный градиент (top, #ededed 0%, # dedede 100%); background: -ms-linear-градиент (top, #ededed 0%, # dedede 100%); фон: линейный градиент (top, #ededed 0%, # dedede 100%); фильтр: 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); тень от рамки: вставка 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; фильтр: drophadow (color = # 4d7a85, offx = 0, offy = 1); граница: 1px solid # 55838f; положение: относительное; поле: -1px;
Теперь календарь должен выглядеть намного лучше.
Исправление положения
На данный момент, посмотрите на дату внимательно. Если щелкнуть дату в первом или последнем столбце, вы заметите, что активное состояние переполняет пиксель за краем календаря..
Итак, здесь мы сделаем несколько небольших исправлений.
Сначала мы уменьшим ширину даты до 29px, и установите правое поле последнего столбца и левое поле первого столбца на 0 обратить вспять -1px маржа, которую мы установили ранее для активного состояния.
.ui-datepicker-calendar td: первый-ребенок .ui-state-active ширина: 29 пикселей; поле слева: 0; .ui-datepicker-calendar td: last-child .ui-state-active ширина: 29px; поле справа: 0;
Дата в последней строке календаря также будет иметь аналогичную обработку.
.ui-datepicker-calendar tr: последний-ребенок .ui-state-active высота: 29 пикселей; нижнее поле: 0;
Теперь посмотрим на результат. Что ж, календарь теперь выглядит красиво и идеально вписывается в нашу модель дизайна. И, вы можете увидеть демо и скачать исходный код, чтобы изучить код по ссылкам под изображением.
- демонстрация
- Скачать исходный код
Бонус: расширить календарь
Что ж, сегодня мы узнали много нового о том, как создать собственную тему для jQuery UI Datepicker. Но не стоит останавливаться на достигнутом, так как есть еще много вещей, которые можно расширить с помощью этого средства выбора даты. В зависимости от вашего уровня владения jQuery и CSS вы расширяете календарь таким образом: ввод текста с помощью оверлея.
- демонстрация
- Скачать исходный код
Дальнейшее чтение
Для дальнейшего чтения на jQuery UI. Вы можете прочитать полную документацию здесь:
- Начало работы с пользовательским интерфейсом jQuery
- Тематический интерфейс jQUery
- Пользовательский интерфейс jQuery: тематические API-классы
Последние мысли
Спасибо за чтение и следование этому уроку, надеюсь, вы найдете его полезным. И, если у вас есть какие-либо отзывы или вы хотели бы добавить то, что может отсутствовать в этом руководстве, не стесняйтесь указывать на это в разделе комментариев ниже. Еще раз спасибо).
