www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
• Создание формы обратной связи на сайте
• Проверка ввода формы обратной связи
• Простая форма обратной связи с проверкой введенных данных
• Создание анкеты на сайте
• Проверка формы обратной связи "на лету"
• Отправка файлов через форму обратной связи
• Капча в форме обратной связи
• Простая капча для формы обратной связи
• Заказ товаров и услуг через форму обратной связи
• Форма обратной связи - отправка писем на разные адреса
• Проблемы с кодировкой в форме обратной связи
• Создание кнопок в форме обратной связи
• Календарь в форме обратной связи
• Оформление формы обратной связи
>> смотреть все статьи о создании формы обратной связи
Календарь в форме обратной связи
Во многих формах обратной связи требуется ввод даты, например, даты заказа авиабилетов, бронирования номера в гостинице и т.п. Для этого обычно используется простая строчка
<input type="text" name="date" />.
К сожалению, посетители по-разному могут ввести данные, что иногда создаёт путаницу. Для исключения этого можно немного доработать форму, например, сделав отдельные поля для числа/месяца/года:
| Дата: |
Пример рабочий, исходный HTML-код не имеет каких-либо особенностей, и вы можете найти и посмотреть его на странице, нажав Ctrl+U.
Еще более удобно и красиво можно сделать ввод даты с помощью всплывающего календарика. Для этого не требуется особых знаний и умений, так как заботливые программисты уже создали десятки вариантов скриптов, наиболее популярные из которых предлагаются в бесплатной библиотеке jQuery. О ней уже неоднократно рассказывалось ранее, например, в статьях "Фотогалерея jQuery - просто и красиво!" или "Создание простого анимированного меню".
Рассмотрим ввод даты в форму обратной связи с помощью виджета Datepicker jQuery UI. Два действующих примера его использования показаны внизу. Для ввода даты щелкаете в поле ввода и выбираете нужное число в выпадающем календаре, после чего оно автоматически вводится в форму. Второй пример отличается от первого раскрывающимися списками для выбора месяца и года, эффектом анимации и ограничением ввода даты: 2 дня назад и 8 месяцев +3 недели +1 день вперед (maxDate: "+8m +3w +1d").
| Пример 1Дата: | Пример 2 Дата: |
Сначала рассмотрим, как за несколько минут установить календарик (пример 1) на сайте, а затем более тщательно, для особо любопытных товарищей, разберемся в тонкостях изменения стилей и настроек календаря (пример 2). Кстати, стиль нашего календаря в библиотеке jQuery называется Sunny (Солнечный).
Установка выпадающего календаря jQuery
Итак, процесс установки календаря состоит из 4 шагов (подробно установка скриптов jQuery на сайт описана в статье "Создание фотогалереи jQuery", но читать этот материал необязательно):
- Скачиваете архив с необходимыми файлами.
- Создаете новую папку calendar в том же каталоге (папке), где расположена страница с формой обратной связи, и распаковываете в неё скачанный архив. В нем две папки - js и css. В первой находятся три js-скрипта, а во второй - файл стилей СSS ( jquery-ui-1.10.2.custom.css) и папка images с вспомогательными изображениями.
- В теге <head>...</head> на странице с формой обратной связи указываете путь к новым файлам и размещаете дополнительный java-скрипт, необходимый для установки параметров календаря:
<link type="text/css" href="calendar/css/jquery-ui-1.10.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="calendar/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="calendar/js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="calendar/js/jquery.ui.datepicker-ru.js"></script>
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker({
changeMonth: false,
changeYear: false
});
});
</script>
<style type="text/css">
div.ui-datepicker {
font-size: 12px;
width:200px;
}
</style>
Обратите внимание, что размеры шрифта и ширину календаря (width) можно задать здесь же в теге<style>...</style>. Высота календаря определяется автоматически, в зависимости от числа дней в месяце. Кстати, никто не мешает добавить и другие правила CSS, например, границы, цвет фона, вид шрифта и т.п. и конечно, все эти данные можно разместить не на странице сайта, а вынести в файл calendar/css/jquery-ui-1.10.2.custom.css. - Для создания выпадающего календаря на странице сайта необходимо добавить в тег <input /> атрибут id="datepicker":
<input type="text" id="datepicker" />.
На этом установка календаря закончена! Можете открыть страницу с формой обратной связи в браузере и полюбоваться на результат.
Важное замечание 1: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Настройка выпадающего календаря jQuery
Чтобы в календаре сделать выбор месяца и года из выпадающих списков, как в Примере 2 вверху, достаточно изменить false на true в двух строчках скрипта установки параметров календаря (см. пункт 3 выше по тексту):
changeMonth: true,
changeYear: true.
Для изменения вывода информации в поле ввода формы откройте файл jquery.ui.datepicker-ru.js и задайте нужный формат даты в строке dateFormat. Например:
dateFormat: 'dd. mm. yy' - число, месяц, год (наш пример),
dateFormat: 'DD, d MM, yy' - день недели, число, месяц, год,
dateFormat: d MM, yy - число, название месяца (полное), год (полный - четыре цифры),
dateFormat: d M, y - число, название месяца (короткое), год (короткий - две цифры)
и т.д.
В этом же файле вы можете изменить падеж и написание с заглавной или прописной буквы названий месяцев и дней недели.
Важное замечание 2: размещая выпадающий календарь на странице сайта, проследите, чтобы его кодировка совпадала с кодировкой страницы. Обычно, это UTF-8 или windows-1251. Изменить кодировку календаря и скорректировать перевод можно в файле jquery.ui.datepicker-ru.js. Для этого, например, в Adobe Dreamweaver надо открыть файл и выбрать в меню Изменить - Свойства страницы - Кодировка. В нашем примере выбрана charset=utf-8.
В заключение, не забывайте, что загрузка скриптов замедляет открытие страницы. При медленном соединении с интернетом это приводит к тому, что выполнение сценариев происходит не сразу, и пользователь некоторое время (до полной загрузки скрипта) не увидит выпадающего календаря.
Далее рассмотрим, как изменить стиль календаря, ввести ограничение диапазона ввода даты и изменить некоторые другие настройки. Это необходимо, чтобы нельзя было, например, заказать билеты на самолет на пять лет вперед или в кинотеатр на прошлый месяц.
Также рассмотрим вывод на странице сайта двух календарей с зависимым выбором даты. Это требуется, например, при указании сроков бронирования номера в гостинице, когда дата выезда не может быть раньше даты заезда, а также при выборе дней вылета/прилета самолетов и др.
28.04.2013 г.
Далее - Изменение стилей выпадающего календаря
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru