www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание формы обратной связи

Изменение стилей и настройки календаря в форме обратной связи

В предыдущей статье было рассказано о вводе даты в форме обратной связи с помощью выпадающего календаря. Внешний вид такого календаря можно самостоятельно изменять в CSS-файле, но лучше не изобретать велосипед, а воспользоваться готовыми образцами, предлагаемыми разработчиками. Для этого можно выбрать подходящий вариант из галереи на странице ThemeRoller jQuery (слева в меню). Затем надо скачать новые файлы, нажав Download под картинкой, и заменить ими старые файлы на вашем сайте, как рекомендовалось в предыдущей статье.

Правда, если вы не сильны в английском, то могут возникнуть небольшие трудности в работе. Поэтому предлагаю сделать проще.

Понятно, что для изменения стиля календаря надо заменить содержимое папки calendar (см. опять же, предыдущую статью). Для некоторых вариантов достаточно заменить только папку scripts/css, в которой находятся файл стилей СSS и папка images, на новую с параметрами выбранного вами дизайна календаря. Но лучше не рисковать, и поменять всё содержимое папки calendar.

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

Выпадающий календарь Выпадающий календарь Выпадающий календарь Выпадающий календарь
Выпадающий календарь Выпадающий календарь Выпадающий календарь Выпадающий календарь
Выпадающий календарь Выпадающий календарь Выпадающий календарь Выпадающий календарь

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

Иногда требуется ввести ограничение на ввод в календаре даты назад или вперед, изменить первый день недели, вид анимации и другие настройки. Для этого достаточно заменить дополнительный java-скрипт, установленный нами при инициализации календаря (см. пункт 3 предыдущей статьи), на следующий:

<script type="text/javascript">
$(function(){
$("#datepicker").datepicker({
changeMonth: false, // true для выпадающего списка месяцев
changeYear: false, // true для выпадающего списка лет
minDate: "-2", // минимальная дата, задание кол-ва дней назад, для отсутствия ограничений убрать строчку
maxDate: "+1y +8m +3w +1d", // максимальная дата, задание кол-ва лет/месяцев/неделей/дней вперед,
defaultDate: null, // устанавливает дату, которая будет подсвечена при первом открытии, null для текущего дня
duration: "normal", // длительность эффекта анимации при открытии/закрытии календаря fast, normal, slow или число в миллисекундах
showAnim: "show", // тип анимации при открытии/закрытии календаря: show, slideDown, fadeIn (при закрывании соответственно hide, slideUp и fadeOut), bounce, blind, clip, drop, fold, slide, none
firstDay: 1 // – установка первого дня недели: воскресенье – 0, понедельник – 1
showButtonPanel: true// - вывод панели с кнопками
});
});
</script>

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

Подробнее о возможных вариантах вывода календаря с примерами смотрите в описании Datepicker.

Если вы хотите разместить на одной странице сайта несколько календарей, то указываете разные значения идентификатора для каждого из них. То есть, добавляете дополнительную строчку в скрипте, например, $("#datepicker_1").datepicker() и указываете id="datepicker_1" для нового календаря. Естественно, вы можете для каждого календаря установить и свой стиль оформления.

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

Кроме размещения календаря на сайте, есть множество и других плагинов для jQuery, например, для создания слайд-шоу, фотогалерей и др. Некоторые интересные, на мой взгляд, плагины jQueryрассмотрены в разделе "Вебдизайн с jQuery - это очень просто!".

29.04.2013 г.

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: создание формы обратной связи, календарь в форме обратной связи, скачать форму обратной связи, ввод даты в форме обратной связи, выпадающий календарь