www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание формы обратной связи
• Создание формы обратной связи на сайте
• Проверка ввода формы обратной связи
• Простая форма обратной связи с проверкой введенных данных
• Создание анкеты на сайте
• Проверка формы обратной связи "на лету"
• Отправка файлов через форму обратной связи
• Капча в форме обратной связи
• Простая капча для формы обратной связи
• Заказ товаров и услуг через форму обратной связи
• Форма обратной связи - отправка писем на разные адреса
• Проблемы с кодировкой в форме обратной связи
• Создание кнопок в форме обратной связи
• Календарь в форме обратной связи
• Оформление формы обратной связи
>> смотреть все статьи о создании формы обратной связи
Значки +/- для ввода чисел в форме обратной связи
Во многих формах обратной связи требуется ввод числовых значений некоторых параметров с ограниченным диапазоном. Это может быть количество товаров в интернет-магазине, гостей в отеле, число детей при заказе билетов на самолет и т.п.
В этом случае, для удобства пользования формой можно в поле input добавить стрелки увеличения/уменьшения числовых данных, как это сделано в следующем примере:
Количество попугаев:
Для создания разнообразных стрелок и иконок увеличения/уменьшения (например, значков +/-) проще всего использовать виджет Spinner Datepicker jQuery UI библиотеки jQuery, который легко установить на сайт.
Установка виджета Spinner
Как обычно, начнём с создания на сайте новой папки, назвав её (угадайте с первого раза!) - spinner. Затем скачиваем архив и распаковываем его в эту папку. В результате получим в ней папку с рисунками-иконками - images, файл стилей CSS и два документа JavaScript. Далее внутри тега <head>...</head> на странице с формой указываем путь к новым файлам и размещаем дополнительный скрипт инициализации виджета Spinner:
<link rel="stylesheet" href="spinner/jquery-ui.css" type="text/css"/>
<script src="spinner/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="spinner/jquery-ui.min.js type="text/javascript""></script>
<script type="text/javascript" >
$(window).load(function(){
$( "#spinner" ).spinner();
});
</script>
Теперь достаточно указать id="spinner" в исходном HTML-коде поля input и получим стрелки увеличения/уменьшения, как в нашем примере:
<p >Количество попугаев: <input name="parrots" id="spinner" size="2" value="1"/></p>
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Настройка виджета Spinner
Настройка внешнего вида поля input, вид стрелок, цвет фона, границ и др. выполняется с помощью стилей CSS в файле jquery-ui.css. Основные регулировки снабжены комментариями на русском языке и не имеют каких-либо особенностей.
Например, для выбора значка увеличения/уменьшения открываете нужный цветовой файл из папки images и указываете координаты значка в пикселах в соответствующих строках файла jquery-ui.css.
Spinner имеет несколько вариантов выбора чисел. Для этого необходимо внести изменения в файл инициализации, размещенный нами внутри тега <head>...</head>. Если, к примеру, необходимо ограничить диапазон выводимых чисел от -10 до +10, то файл будет такой:
<script type="text/javascript">
$(function() {
$( "#spinner" ).spinner({
spin: function( event, ui ) {
if ( ui.value > 10 ) {
$( this ).spinner( "value", -10 );
return false;
} else if ( ui.value < -10 ) {
$( this ).spinner( "value", 10 );
return false;
}
}
});
});
</script>
Кроме того, с помощью виджета Spinner можно задать шаг изменения чисел, ввод децимальной точки, организовать установку времени, изменение координат с выводом карты и др. Подробно об этом с примерами смотрите в описании виджета Spinner на официальном сайте.
25.11.2014 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru