www.seomark.ru |
Веб-дизайн и поисковая оптимизация |
|
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | ||
Создание формы обратной связи
Значки +/- для ввода чисел в форме обратной связиВо многих формах обратной связи требуется ввод числовых значений некоторых параметров с ограниченным диапазоном. Это может быть количество товаров в интернет-магазине, гостей в отеле, число детей при заказе билетов на самолет и т.п. В этом случае, для удобства пользования формой можно в поле input добавить стрелки увеличения/уменьшения числовых данных, как это сделано в следующем примере: Количество попугаев: Для создания разнообразных стрелок и иконок увеличения/уменьшения (например, значков +/-) проще всего использовать виджет Spinner Datepicker jQuery UI библиотеки jQuery, который легко установить на сайт. Установка виджета SpinnerКак обычно, начнём с создания на сайте новой папки, назвав её (угадайте с первого раза!) - spinner. Затем скачиваем архив и распаковываем его в эту папку. В результате получим в ней папку с рисунками-иконками - images, файл стилей CSS и два документа JavaScript. Далее внутри тега <head>...</head> на странице с формой указываем путь к новым файлам и размещаем дополнительный скрипт инициализации виджета Spinner:
Теперь достаточно указать id="spinner" в исходном HTML-коде поля input и получим стрелки увеличения/уменьшения, как в нашем примере:
Настройка виджета SpinnerНастройка внешнего вида поля input, вид стрелок, цвет фона, границ и др. выполняется с помощью стилей CSS в файле jquery-ui.css. Основные регулировки снабжены комментариями на русском языке и не имеют каких-либо особенностей. Например, для выбора значка увеличения/уменьшения открываете нужный цветовой файл из папки images и указываете координаты значка в пикселах в соответствующих строках файла jquery-ui.css. Spinner имеет несколько вариантов выбора чисел. Для этого необходимо внести изменения в файл инициализации, размещенный нами внутри тега <head>...</head>. Если, к примеру, необходимо ограничить диапазон выводимых чисел от -10 до +10, то файл будет такой:
Кроме того, с помощью виджета Spinner можно задать шаг изменения чисел, ввод децимальной точки, организовать установку времени, изменение координат с выводом карты и др. Подробно об этом с примерами смотрите в описании виджета Spinner на официальном сайте. 25.11.2014 г. |
||
|
||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | ||
Copyright © 2008 - Марк Розенталь e-mail: Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru Значки +/- для ввода чисел в форме обратной связи, примеры jQuery, создание формы обратной связи, скачать форму обратной связи, ввод данных в форме обратной связи |