Действия колесиком мышки
Всем привет. Сегодня я сделаю обзор интересного плагина для управления значениями полей форм с помощью колесика мышки. Решения мне нравится тем, что некоторые формы можно будет заполнять только с помощью мышки, а это выглядит просто классно.
Теперь перейдем к технической реализации. Для этого на понадобится 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;
});Так что это можно использовать почти в любой вашей форме.
Думаю, применить к своим проектам данные наработки не составит труда - зато такая приятная мелочь для пользователей!
I got what you plan, thanks for putting up. Woh I am gladsome to happen this website through google. Thanks For Share ДейÑÑ‚Ð²Ð¸Ñ ÐºÐ¾Ð»ÐµÑиком мышки | Чернев.ру.
Hey There. I found your blog using msn. This is a really well written article. I’ll be sure to bookmark it and come back to read more of ДейÑÑ‚Ð²Ð¸Ñ ÐºÐ¾Ð»ÐµÑиком мышки | Чернев.ру . Thanks for the post. I will definitely comeback.
Hello There. I found your blog using msn. This is a very well written article. I’ll be sure to bookmark it and come back to read more of ДейÑÑ‚Ð²Ð¸Ñ ÐºÐ¾Ð»ÐµÑиком мышки | Чернев.ру . Thanks for the post. I’ll definitely comeback.