Прокрутка значений input ‘a

Попробуем увеличить удобность и быстроту ввода данных в поля ввода текста или числовой информации, то есть быстроту заполнения полей “input”-ов. Некоторые используют кнопки плюс и минус или просто ставят выпадающее меню, но мы попробуем сделать так чтобы значения поля менялось по прокрутке колесика мышки для этого мы используем Jquery плагин который добавляет событие mousewheel скачать вы его можете отсюда.

HTML

Событие mousewheel можно применить к любому элементу, попробуем применить его к инпуту для ввода чисел, напишем пока следующий html код:

<div>
    <label for="how-many">Сколько? </label>
    <input type="text" id="how-many" class="wheelable" value="1" name="how-many" />
</div>

jQuery

Нам нужно подключить три javascript файла это jQuery, его плагин и наш собственный скрипт. Подключаем:

<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>

Создаем наш файл как вы заметили называется он increment.js и пишем следующее:

$(function() {

    $("div").append('<img src="images/mousewheelupdown.png" />');

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

});

Когда DOM элементы загружены, мы связываем событие “mousewheel” с input’ом. Если навести курсор на input и вращать вперед то значение будет увеличиваться каждый раз на 1, если соответственно прокручивать в другую сторону значение будет уменьшаться.

То же самое с текстовым полем

Только что мы узнали как увеличивать или уменьшать значение по вращению колесика мышки, но теперь прокручивать текстовые значения по тому же событию, это будет чуть чуть сложнее. Пишем следующий код:

var mass = new Array();  i=0;
mass[0]='white';
mass[1]='black';
mass[2]='grow';
mass[3]='blue';
mass[4]='red';
     $("#whale").bind("mousewheel", function(event, delta) {
	    if (delta > 0) {
	      if(i<4){
		    i=i+1;
            this.value = mass[i];} else{ this.value = mass[i];}
        } else {
          if (i <=0) {
            this.value = mass[i];
          } else{
             i=i-1;
            this.value = mass[i];
		  }
        }
        return false;
     });

Здесь мы создаем массив mass с пятью элементами и при вращении колесика увеличиваем или уменьшаем порядковый номер элемента массива и приравниваем его значение значению input'а.
Смотрим демо.