Действия колесиком мышки
Всем привет. Сегодня я сделаю обзор интересного плагина для управления значениями полей форм с помощью колесика мышки. Решения мне нравится тем, что некоторые формы можно будет заполнять только с помощью мышки, а это выглядит просто классно.
Теперь перейдем к технической реализации. Для этого на понадобится 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;
});Так что это можно использовать почти в любой вашей форме.
Думаю, применить к своим проектам данные наработки не составит труда - зато такая приятная мелочь для пользователей!
Очень шЫкарно, не ожидал увидеть новый контрол :)
До конца читал и думал укажешь автора или нет :D
Но на практике сложно представить где это может пригодиться. Возраст проще ввести, а при выборе страны допустим или любого другого пункта меню нет самого нужного – отображения местоположения.
Оригинально, но с точки зрения юзабилити думаю, что сложновато. Как элемент улучшения может и подойти.
С числами интересный вариант, а со словами аналог комбобокса, еще бы автозаполнение добавить… )
А что делать, если в лисе не работает сие чудо?
Работает только если кликнуть в поле ввода, а потом крутит колесо. Если кликнуть в лейбле – не работает.
Нет, не так. работает, только когда курсор над полем. Если бы работало при фокусе на поле – было бы интересно. А так – только путает:)
Креативное решение! Но чую не все браузеры воспримут.
Наверно, рано ещё такое внедрять. А так идея очень даже хорошая, клаву скоро вообще выкинем
Должно во всех браузерах работать, это же jQuery. А автора действительно хотелось бы узнать)
Ах, сразу ссылку не увидел, только комментарий Dr.Death
Спасибо за интересное новое)
Кто же автор?
Я считаю что юзабеьность для обычного пользователя под большим вопросом.
Решение действительно креативное, мне бы такое в голову никогда не пришло
Мысль конечно интересная, но для пользователей она будет странной, и не сразу поймут в чем дело.