KeyBoard使用jquery导航菜单

时间:2009-09-11 06:01:39

标签: javascript jquery keyboard-navigation

我正在尝试将键盘导航添加到菜单(基于ul li ),我已将keydown事件绑定到菜单(或者我应该将keydown绑定到文档?)

使用的处理函数如下所示

 KeyDown: function(e) {        

    var toFocus = false;


                  if (e.keyCode == 38) {
         toFocus = $((e.target/* li */).next()[0]);
      }
                          if (e.keyCode == 40) {
         toFocus = $((e.target).next()[1]);
      }
    if (toFocus) {
        $(e.target).attr('tabIndex', '-1');
        $(toFocus).attr('tabIndex', '0');
        toFocus.focus();
        return false;
        }
        }

这里我得到 e.target为html 而不是li?

你可以建议任何其他方式来添加键盘导航吗?

2 个答案:

答案 0 :(得分:1)

我只是想知道为什么不使用现有的插件而不是自己做这个?

  

jQuery Keyboard Navigation

demo page here

  

我的演示:只是添加demo page示例

答案 1 :(得分:1)

尝试使用自定义属性来保持tabid上下。

...KeyDown: function(e) {
    var Direction;
    if (e.keyCode == 38)
         Direction = "toUp";
    else Direction = "toDown";

    var Focus = $("li[tabid=\""$(e.target.id).attr(Direction)"\"]");
    Focus.focus();
}

---

<li ... tabid="1" toUp="-1" toDown= "2" />
<li ... tabid="2" toUp= "1" toDown= "3" />
<li ... tabid="3" toUp= "2" toDown= "4" />
<li ... tabid="4" toUp= "3" toDown="-1" />

上面的代码只是为了表明这个想法,现在已经很晚了,我没有时间去测试它。所以请不要因为不工作而投票给我。

希望有所帮助