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:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru