Как: настройка и тематика jQuery UI Datepicker

Пользовательский интерфейс jQuery просто потрясающий и, благодаря простоте использования, он популярен и широко используется практически на любом веб-сайте, который нуждается в интерактивных функциях.

И в этом посте мы рассмотрим одну из Datepicker виджет,

Мы постараемся научиться настраивать тему календаря, чтобы вы могли создать собственную тему, соответствующую вашему общему дизайну. Тем не менее, вам нужно немного разобраться в JavaScript и ознакомиться с CSS, прежде чем следовать этому руководству.

Если вы готовы, давайте начнем.

Активы

Давайте подготовим некоторые из основных активов для календаря.

Во-первых, дизайн календаря будет относиться к этому PSD файл от Премиум Пикселей, Поэтому лучше сначала загрузить его, чтобы помочь нам взять образец нужных нам цветов. Затем загрузите два шаблона из утонченный Узоры что мы будем использовать в качестве фона нашего календаря. В этом примере мы решили использовать следующие шаблоны: черная джинсовая ткань и темная кожа,

Нам также понадобится инструмент веб-разработки, такой как поджигатель для проверки классов / идентификаторов элементов, сгенерированных пользовательским интерфейсом jQuery.

Ну, я думаю, у нас было достаточно подготовки. Теперь давайте перейдем к первому шагу.
Шаг 1: jQuery UI Datepicker
Сначала зайдите в Страница загрузки jQuery UI, На этой странице вам будет предложено несколько вариантов: Ядро пользовательского интерфейса, виджеты, взаимодействия и эффекты.

Мы должны отменить выбор всех компонентов, поскольку нам не нужны все из них.

Затем в разделе «Виджеты» выберите только средство выбора даты. Пользовательский интерфейс jQuery автоматически выберет необходимые зависимости, а затем загрузит файл.

Ссылка на все загруженные файлы – кроме CSS – в пустой HTML-документ, как указано ниже:

Шаг 2. Настройка Datepicker
На этом шаге мы настроим средство выбора даты со следующими параметрами.

Приведенный выше код проинструктирует jQuery отображать календарь для элемента с идентификатором datepicker. Итак, нам нужно поместить следующий тег div с идентификатором datepicker в раздел body, чтобы сформировать календарь:

Теперь календарь уже должен был быть сгенерирован и выглядеть следующим образом, без каких-либо стилей, но по-прежнему имеет функциональность.

Шаг 3: Стили
Теперь давайте начнем стилизацию календаря. Мы начнем с нормализации всех элементов – как обычно – и создания новой таблицы стилей, в этом примере я назову ее datepicker.css. Затем свяжите их все с документом HTML. Затем мы сначала прикрепим фон к телу, чтобы наш HTML не выглядел слишком простым.
тело {
фон: url (‘../ img / darkdenim3.png’) repeat 0 0 # 555;
}
Далее мы укажем ширину указателя даты, поместим его в центр и добавим тень, чтобы придать календарю эффект промисенса.
.ui-datepicker {
ширина: 216 пикселей;
высота: авто;
поле: 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% ширины для таблицы, чтобы она имела ту же максимальную ширину, что и обертка выше; это 216 пикселей
.ui-datepicker table {
ширина: 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);
тень от рамки: вставка 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 {
выравнивание текста: по центру;
}
Замените текст «Далее» и «Предыдущий» на изображения со стрелками спрайтов, вырезанные из PSD.
.ui-datepicker-prev, .ui-datepicker-next {
дисплей: встроенный блок;
ширина: 30 пикселей;
высота: 30 пикселей;
выравнивание текста: по центру;
курсор: указатель;
background-image: url (‘../ img / arrow.png’);
повторение фона: без повтора;
высота линии: 600%;
переполнение: скрытое;
}
Затем отрегулируйте положение стрелки соответственно.
.ui-datepicker-prev {
плыть налево;
background-position: center -30px;
}
.ui-datepicker-next {
плавать: правильно;
background-position: center 0px;
}
Несмотря на то, что раздел названий дней обернут в thead, основываясь на нашей проектной ссылке, он будет иметь слегка белый градиент. И, чтобы упростить нашу задачу, мы будем использовать этот инструмент чтобы сгенерировать код градиента:
.ui-datepicker thead {
цвет фона: # 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 {
преобразование текста: верхний регистр;
размер шрифта: 6pt;
отступы: 5px 0;
цвет: # 666666;
тень текста: 1px 0px 0px #fff;
фильтр: drophadow (color = # fff, offx = 1, offy = 0);
}
На этом этапе календарь будет выглядеть так:

Стиль Даты

Календарные даты заключены в данные таблицы или таблицы. Итак, мы установим отступ в 0, чтобы убрать пробелы между тд и присвоить ему правую границу 1px.
.ui-datepicker tbody td {
отступы: 0;
border-right: 1px solid #bbb;
}
За исключением последнего тд, у которого не будет правой границы. Мы устанавливаем правую границу на 0 для этого.
.ui-datepicker tbody td: last-child {
border-right: 0px;
}
Строка таблицы будет почти такой же. Он будет иметь нижнюю границу в 1 пиксель, за исключением последнего ряда.
.ui-datepicker tbody tr {
граница снизу: 1px solid #bbb;
}
.ui-datepicker tbody tr: last-child {
граница снизу: 0px;
}

Стилизация стиля по умолчанию, наведения и активного состояния

На этом шаге мы определим наведение даты и активные стили. Сначала мы определим состояние даты по умолчанию, указав размерность; центрируйте положение текста даты, добавьте цвет градиента и внутреннюю белую тень.
.ui-datepicker td span, .ui-datepicker td a {
дисплей: встроенный блок;
вес шрифта: полужирный;
выравнивание текста: по центру;
ширина: 30 пикселей;
высота: 30 пикселей;
высота строки: 30 пикселей;
цвет: # 666666;
тень текста: 1px 1px 0px #fff;
фильтр: drophadow (color = # fff, offx = 1, offy = 1);
}
.ui-datepicker-calendar .ui-state-default {
фон: #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%);
фон: -ms-линейный градиент (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 {
фон: # 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;
тень текста: 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 {
ширина: 29 пикселей;
поле справа: 0;
}

Дата в последней строке календаря также будет иметь аналогичную обработку.
.ui-datepicker-calendar tr: последний-ребенок .ui-state-active {
высота: 29 пикселей;
нижнее поле: 0;
}
Теперь посмотрим на результат. Что ж, календарь теперь выглядит красиво и идеально вписывается в наш дизайн. И вы можете увидеть демо и скачать исходный код, чтобы изучить код по ссылкам под изображением.

Бонус: расширить календарь

Что ж, сегодня мы узнали много нового о том, как создать собственную тему для jQuery UI Datepicker. Но вы не должны останавливаться на достигнутом, поскольку есть еще много вещей, которые можно расширить с помощью этого средства выбора даты. В зависимости от вашего уровня владения jQuery и CSS вы расширяете календарь таким образом: ввод текста с оверлейным датчиком.

Дальнейшее чтение
Для дальнейшего чтения на jQuery UI. Вы можете прочитать полную документацию здесь:

Последние мысли

Спасибо за чтение и следование этому уроку, надеюсь, вы найдете его полезным. И, если у вас есть какие-либо отзывы или вы хотели бы добавить то, что может отсутствовать в этом руководстве, не стесняйтесь указывать на это в разделе комментариев ниже. Еще раз спасибо).