Доброго времени суток, уважаемые читатели! Не давно в одном из сайтов пришлось применить навыки программирования на JavaScript. Данный скрипт позволяет производить ручную перестановку элементов в компоненте select, с использованием клавиатуры (клавиш ↑↓).
Первым, что необходимо сделать – это подготовить форму, которая будет содержать необходимые элементы для сортировки.
<form id="sortForm"> <select id="swId" onkeydown="return keyDown(event,getSelElemSort())" name="sw" size="10"> <option selected="selected" value="1">Арбуз</option> <option value="2">Помидор</option> <option value="3">Вишня</option> <option value="4">Слива</option> <option value="5">Яблоко</option> <option value="6">Лимон</option> <option value="7">Абрикос</option> <option value="8">Груша</option> <option value="9">Персик</option> <option value="10">Черешня</option> </select> </form>
Обратите внимание, что форма уже приведена с некоторыми вставками JavaScript. Далее я буду подбробно рассказывать о каждой функции.
Что касается алгоритма программирования, то он достаточно прост:
1. Узнать какой элемент компонента select выделен;
2. узнать в каком направлении будет перемещен элемент и в зависимости от этого производить перестановку выделенного элемента с другим, который находится выше или ниже его (в зависимости от нажатой клавиши).
Реализация функции getSelElemSort (), которая отвечает за индекс выделенного элемента option.
function getSelElemSort(){
/*элемент select*/
var objSelWindow = document.sortForm.sw;
/*Проверка, выделен ли элемент в select*/
if(objSelWindow.selectedIndex != -1){
/*если выделен, возвращаем его индекс*/
return objSelWindow.selectedIndex;
}
}
keyDown () – функция обработки клавиш, позволяет определить какая клавиша была нажата. В данную функцию передается два параметра, первый even – это объект с помощью, которого можно определить номер нажатой клавиши, второй selIndex – индекс выделенного элемента.
За сортировку отвечает функция sortElem (), в качестве параметров принимает selIndex – индекс выделенного элемента, keycode — код нажатой клавиши.
Алгоритм функции заключается в следующем:
— определить какая из двух клавиш была нажата (↑ – код 38, ↓ – код 40);
— в зависимости от нажатой клавиши произвести сортировку (методом трех стаканов).
Для удобной работы были созданы переменные:
objSelWindow – элемент select;
maxSelWindow – кол-во элементов в select;
valueSortElem – значение выделенного элемента;
textSortElem – текст выделенного элемента;
tempValue – временная переменная, которая будет хранить значение переставляемого элемента;
tempText – временная переменная, которая будет хранить текст переставляемого элемента;
С помощью switch определяется код клавиши. При 38, перед изменением элемента необходимо узнать, что предыдущий индекс не равен -1 (порядок в элементе select начинается с 0). Если предыдущий индекс не равен -1 , то производится их перестановка.
При коде 40, так же происходит проверка, только следующего элемента (в данном случае если он меньше 10).
function sortElem(selIndex,keyCode){
var objSelWindow = document.sortForm.sw;
var maxSelWindow = objSelWindow.length;
var valueSortElem = objSelWindow.options[objSelWindow.selectedIndex].value;
var textSortElem = objSelWindow.options[objSelWindow.selectedIndex].text;
var tempValue;
var tempText;
switch(keyCode){
case 38: {
if(selIndex-1 != -1){
/*Перестановка значений и текста выделенного элемента и элемента, который размещен выше (selIndex-1) */
tempValue = objSelWindow.options[selIndex-1].value;
tempText = objSelWindow.options[selIndex-1].text;
objSelWindow.options[selIndex-1].value = objSelWindow.options[selIndex].value;
objSelWindow.options[selIndex-1].text = objSelWindow.options[selIndex].text;
objSelWindow.options[selIndex].value = tempValue;
objSelWindow.options[selIndex].text = tempText;
objSelWindow.options[selIndex].selected();
}
break;
}
case 40: {
if(selIndex+1 < 10){
/*Перестановка значений и текста выделенного элемента и элемента, который размещен ниже (selIndex+1) */
tempValue = objSelWindow.options[selIndex].value;
tempText = objSelWindow.options[selIndex].text;
objSelWindow.options[selIndex].value = objSelWindow.options[selIndex+1].value;
objSelWindow.options[selIndex].text = objSelWindow.options[selIndex+1].text;
objSelWindow.options[selIndex+1].value = tempValue;
objSelWindow.options[selIndex+1].text = tempText;
objSelWindow.options[selIndex].selected();
}
break;
}
default : {alert("Используйте стрелки вверх/вниз чтобы управлять элементами!");}
}
return false;
}
P.S. Работу скрипта хорошо заметно, если параллельно просматривать исходный код. Это можно сделать к примеру в Chrome, используя функцию «Просмотр кода элемента».
