|
Заполняем формы колёсиком мышкиПарикмахер «Пьер и Константин», охотно отзывавшийся,
8 марта 2010
впрочем, на имя «Андрей Иванович», и тут не упустил случая. «12 стульев», Ильф и Петров. ![]() Всем привет. Сегодня я сделаю обзор интересного плагина для управления значениями полей форм с помощью колёсика мышки. Решение мне нравится тем, что некоторые формы можно будет заполнять только с помощью мышки, а это выглядит просто классно.
Теперь перейдём к технической реализации. Для этого нам понадобится 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;
});
Так что это можно использовать почти в любой вашей форме. ![]() Думаю, применить к своим проектам данные наработки не составит труда — зато такая приятная мелочь для пользователей! Скачать скрипты и ресурсы для этого плагина. Автор: Чернев.
Комментарии:
⇓ Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим. Поделиться ссылкой на эту страницу в:
|
|
Так можно заработать на интернет-играх | Способы заработать молодой маме в декрете |