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

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

    Теперь перейдём к технической реализации. Для этого нам понадобится 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; });
});

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

Сколько вам лет?

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

$("#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;
});

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

Ваш любимый цвет?

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

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

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

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

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