написал маленький скриптик
есть 2 версии :
исходник и
очень сильно ужатая (GCC, advanced mode).
строка в конце
"_keyNav" - имя глобальной переменной, которую можно будет использовать для создания навигации
если хотите, можно её изменить на
"mySuperNav" или что-то в этом духе.
маленькая документация :
конструктор принимает три аргумента
new _keyNav( options, elements [, onmove] );
где
options - объект-хеш, содержащий настройки
квадратные скобки показывают необязательные аргументы.
пример:
|
Цитата:
|
{
rows: кол-во строк.,
cols: кол-во столбцов,
current: [ текущ. строка, текущ. столбец ]
}
|
далее,
elements. это - коллекция элементов. см. пример
функция
onmove будет срабатывать при каждом изменении "активного" элемента (вызов функции
moveTo )
в функцию-обработчик псевдособытия передаются 2 аргумента :
первый : с чего перешли, второй : на что перешли.
|
Цитата:
|
function my_onmove ( старый элемент, текущий элемент ){};
|
обработчик сохраняется в свойстве
onmove, т.е. его можно менять на другой, если будет необходимо.
....
далее.
у экземпляра (читай: навигации) есть 2 метода :
move и
moveTo
moveTo просто изменяет внутренний указатель и порождает псевдособытие
move (типа низкоуровневая функция)
принимает 1 аргумент - массив с указателем
|
Цитата:
|
myNavObj.moveTo( [ строка , столбец ] );
|
..
функция
move принимает один аргумент - строку, содержащую направление сдвига указателя.
возможные значение :
"up","down","left","right". смещения указателя соотв. значениям слов.
порождает псевдособытие
move
...............................................
всё
выкладываю пример :
jsfiddle
и тут
<script type="text/javascript">
(function(l){function g(a,b,c){var d=this[j]=[],e,g=a.rows,k=0,h,i=a.cols;for(e=0;e<g;e++){d[e]=[];for(h=0;h<i;k++,h++){if(!b[k])break;d[e][h]=b[k]}}this[f]=~this.toString.call(a[f]).indexOf("Array")?a[f]:[0,0];this.onmove=typeof c=="function"?c:function(){}}var f="current",j="elementsMatrix",i=g.prototype={};i.moveTo=function(a){var b=this[j];this.onmove.call(this,b[this[f][0]][this[f][1]],b[(this[f]=a)[0]][a[1]])};i.move=function(a){var b=this[j],c=[this[f][0],this[f][1]],d=a=="up"?-1:a=="down"?
1:0,e=a=="left"?-1:a=="right"?1:0;b[c[0]+d]||(d=0);b[c[0]+d][c[1]+e]||(d=a=="left"?-1:1,e=b[c[0]+d]?(a=="left"?1:-1)*(b[0].length-1):d=0);this.moveTo([c[0]+d,c[1]+e])};window[l]=function(a,b,c){return new g(a,b,c)}})("_keyNav");
</script>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<br>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<script type="text/javascript">
var o = { rows:2,cols:3, current : [0,0] },
elems = document.getElementsByTagName("textarea"),
onmove = function(oldEl, newEl){ newEl.focus() }
var nav = new _keyNav( o, elems, onmove );
console.log(nav)
document.body.onkeydown = function(e){
if(!e || !e.keyCode) e=event;
switch( e.keyCode||e.which ){
case 37 : nav.move("left"); break;
case 38 : nav.move("up"); break;
case 39 : nav.move("right"); break;
case 40 : nav.move("down");
}
return false;
};
</script>
