заполняем формы колёсиком мышки Главная > Вебмастеру > Создание своего сайта > Заполняем формы мышью

Заполняем формы колёсиком мышки

Парикмахер «Пьер и Константин», охотно отзывавшийся,
впрочем, на имя «Андрей Иванович», и тут не упустил случая.
«12 стульев», Ильф и Петров.
8 марта 2010

    Всем привет. Сегодня я сделаю обзор интересного плагина для управления значениями полей форм с помощью колёсика мышки. Решение мне нравится тем, что некоторые формы можно будет заполнять только с помощью мышки, а это выглядит просто классно.

    Теперь перейдём к технической реализации. Для этого нам понадобится jQuery и пара плагинов к нему, такиех как MouseWheel Plugin и небольшой плагин от css trick.

    Для начала создадим поле, с которым мы будем работать:


<div>
	<label for="how-many">How Many? </label>
	<input type="text" id="how-many" class="wheelable" value="1" name="how-many" />
</div>

    Теперь подключим все необходимы javascript-библиотеки:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/increment.js"></script>

    Теперь применим к нашему полю эти скрипты:


$(function() { 

$("div").append('<img src="images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');

$("#how-many").bind("mousewheel", function(event, delta) {
	if (delta > 0) {
		this.value = parseInt(this.value) + 1;
	} 

	else {
		if (parseInt(this.value) > 0) {
		this.value = parseInt(this.value) - 1;
		} 

	} return false; });
});

    Готово! Всё работает, сами смотрите, что вышло.

Scroll up or down with mousewheel

    Также можно изменять не только численные значения:


$("#whale").bind("mousewheel", function(event, delta) {
	if (this.value == "Blue") {
		this.value = "Sperm";
	} 

	else if (this.value == "Sperm") {
		this.value = "Orca";
	} 

	else if (this.value == "Orca") {
		this.value = "Humpback";
	}
	else if (this.value == "Humpback") {
		this.value = "Blue"; } return false;
});

    Так что это можно использовать почти в любой вашей форме.

Scroll up or down with mousewheel

    Думаю, применить к своим проектам данные наработки не составит труда — зато такая приятная мелочь для пользователей!

    Скачать скрипты и ресурсы для этого плагина.

Автор: Чернев.

Комментарии:

  • deerua:
    Очень шЫкарно, не ожидал увидеть новый контрол :)
  • Dr.Death:
    До конца читал и думал укажешь автора или нет :D
  • Луи Ползав:
    Но на практике сложно представить где это может пригодиться. Возраст проще ввести, а при выборе страны допустим или любого другого пункта меню нет самого нужного – отображения местоположения.
  • Нгуен Павел:
    Оригинально, но с точки зрения юзабилити думаю, что сложновато. Как элемент улучшения может и подойти.
  • Разработчик:
    С числами интересный вариант, а со словами аналог комбобокса, еще бы автозаполнение добавить )
  • Егор:
    А что делать, если в лисе не работает сие чудо?
  • Enlightened:
    Работает только если кликнуть в поле ввода, а потом крутит колесо. Если кликнуть в лейбле не работает.
    Нет, не так. работает, только когда курсор над полем. Если бы работало при фокусе на поле было бы интересно. А так только путает:)
  • Николай:
    Креативное решение! Но чую не все браузеры воспримут.
  • Maker:
    Наверно, рано ещё такое внедрять. А так идея очень даже хорошая, клаву скоро вообще выкинем
  • Саня:
    Должно во всех браузерах работать, это же jQuery. А автора действительно хотелось бы узнать)
  • Саня:
    Ах, сразу ссылку не увидел, только комментарий Dr.Death
    Спасибо за интересное новое)
  • iPdA:
    Кто же автор?
    Я считаю что юзабеьность для обычного пользователя под большим вопросом.
  • oleg:
    Решение действительно креативное, мне бы такое в голову никогда не пришло

 

поделись ссылкой с друзьями

⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

Полезные ссылки:

Так можно заработать на интернет-играх Способы заработать молодой маме в декрете

Ещё материалы по этой теме:

Резервное копирование с помощью bat-файла Структура HTML-документа Три правила дизайна Поле, русское поле Гордиев узел навигации: выкинем первые уровни
основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!