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", но читать этот материал необязательно):

  1. Скачиваете архив с необходимыми файлами.
  2. Создаете новую папку calendar в том же каталоге (папке), где расположена страница с формой обратной связи, и распаковываете в неё скачанный архив. В нем две папки - js и css. В первой находятся три js-скрипта, а во второй - файл стилей СSS ( jquery-ui-1.10.2.custom.css) и папка images с вспомогательными изображениями.
  3. В теге <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.
  4. Для создания выпадающего календаря на странице сайта необходимо добавить в тег <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=windows-1251.

В заключение, не забывайте, что загрузка скриптов замедляет открытие страницы. При медленном соединении с интернетом это приводит к тому, что выполнение сценариев происходит не сразу, и пользователь некоторое время (до полной загрузки скрипта) не увидит выпадающего календаря.

Далее рассмотрим, как изменить стиль календаря, ввести ограничение диапазона ввода даты и изменить некоторые другие настройки. Это необходимо, чтобы нельзя было, например, заказать билеты на самолет на пять лет вперед или в кинотеатр на прошлый месяц.

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

28.04.2013 г.

Далее - Изменение стилей выпадающего календаря

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





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

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