Доброго времени суток, уважаемые читатели! Не давно в одном из сайтов пришлось применить навыки программирования на 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, используя функцию «Просмотр кода элемента».
