键盘导航

最新推荐文章于 2025-06-04 09:06:49 发布

翻译最新推荐文章于 2025-06-04 09:06:49 发布 · 894 阅读

文章标签：

#function #扩展 #ext #浏览器 #工作 #up

键盘导航

导航键盘往往是快比使用游标，为电力用户非常有用，并提供方便用户发现很难用鼠标。

我们要去一个比较复杂的Ext JS修改后的版本复杂的布局。例如转换成一个应用程序是完全通过键盘访问。我们还添加键盘快捷键可能使光标移动速度比通过键盘导航。

通过本指南，你将有一个键盘导航是最需要的，以及如何利用键盘导航的理解KeyNav ，键盘映射的FocusManager的。

入门

这些是我们将开始从该文件。解压并打开您喜欢的编辑器complex.html complex.js。也解压到同一目录中的Ext JS 4副本，其重命名为“内线”。

焦点管理

焦点管理器提供了一个非常快速的方式，使基本的键盘导航。更重要的是，它是简单的实现：

分机的FocusManager 。启用（真）;

写这里面Ext.onReady线;我们通过真正的布尔在聚焦区周围的蓝环（这是作为一个对焦框）的形式呈现出“视觉线索”。这对焦框很容易地看到在这方面有重点一目了然。用户按下回车键进入应用程序，然后将“水平”，输入下井的水平和Backspace或逃避升了一级。可以使用Tab键之间跳跃同级元素（那些在同一水平上）。

FocusManager的元素只与周围航行试验。如果可以的话，关掉你的鼠标。虽然足够，你可能会发现，某些地区是人迹罕至的（如电网），或在屏幕上，它是相当繁琐。我们要解决这个“捷径”，这将使用户能够轻而易举地跳某些面板的应用。

时决定的面板应该有他们的捷径，它是非常有用的，有一些标准去：

它经常被使用？
它可以被用来作为一个锚 - 也就是说，它可以提供一个踏脚石，使其他偏远地区更容易获得呢？
它感觉直观的导航？

如果答案是肯定的，至少其中之一，给它一个键盘快捷键和帮助您的最终用户。

KeyNav

这是KeyNav工作提供方便的键盘导航。它允许你使用下面的按键来浏览Ext JS的应用程序：

进入
空间
离开
权利
最多
向下
选项卡
逃生
上一页
下一页
删除
Backspace键
家
结束

在有限的键盘可能没有某些键的头脑用户，这也是值得的，例如某些苹果电脑不具有向上，向下翻页，德尔，Home或End键。让我们来看看你如何使用它的一个例子。

var nav = Ext.create('Ext.util.KeyNav', "my-element", {
    "left" : function(e){
        this.moveLeft(e.ctrlKey);
    },
    "right" : function(e){
        this.moveRight(e.ctrlKey);
    },
    "enter" : function(e){
        this.save();
    },
    scope : this
});

KeyNav的专业监听键，所以我们要添加的导航面板上的箭头键，而不必使用制表能力，输入和逃避。

var nav = Ext.create('Ext.util.KeyNav', Ext.getBody(), {
    "left" : function(){
        var el = Ext.FocusManager.focusedCmp;
        if (el.previousSibling()) el.previousSibling().focus();
    },
    "right" : function(){
        var el = Ext.FocusManager.focusedCmp;
        if (el.nextSibling()) el.nextSibling().focus();
    },
    "up" : function() {
        var el = Ext.FocusManager.focusedCmp;
        if (el.up()) el.up().focus();
    },
    "down" : function() {
        var el = Ext.FocusManager.focusedCmp;
        if (el.items) el.items.items[0].focus();
    },
    scope : this
});

我们得到与当前重点组件focusedCmp。如果函数有一个比其他空值，我们专注于我们想要的元素，它与前一个同级左箭头键或向下键的第一个孩子组件。我们已经使我们的应用程序更容易导航。下一步，我们要看看在Ext.util.KeyMap及如何添加特定功能键。

键盘映射

你会发现有许多地区，我们的内线应用：北，南，东和西。我们要创建一个键盘映射，不仅将集中在这些元素，但是，如果该地区处于折叠状态，它也扩大。让我们来看看一个典型的键盘映射对象看起来像什么。

VAR =  分机创建（Ext.util.KeyMap“ ，“我元素”  ， { 
    键： 13 ， / /或Ext.EventObject.ENTER 
    CTRL ： 真实，
    转变： 虚假，
    FN ：MyHandler的，
    范围：myObject的
 } ）;

第一个属性，关键是数字键码映射的关键。一个有用的文件，地图，数字与哪个键可以在这里找到。未来两年，ctrl和移位，指定相应的键，如果需要举行激活功能。在我们的例子中，CTRL，所以Ctrl + Enter键将调用MyHandler的。fn是被称为功能。这可以是内嵌或一个函数的引用。最后，范围定义，这将是有效的键盘映射。

键盘映射是多才多艺的，它使您可以指定其中一个关键，进行了一个函数或一个数组进行相同的功能键。如果我们想要的键调用MyHandler的，我们会写它像键：[10，13] 。

首先，我们将专注于主板：北部，南部，东部和西部。

VAR 地图=  分机。创建（“Ext.util.KeyMap” ， 分机getBody （）， [ 
    { 
        键： 分机。EventObject中。E ， / / E为东部
        转移： 真实，
        CTRL ： 虚假， / /显式设置为false避免碰撞
        FN ： 函数（） { 
            VAR parentPanel eastPanel ; 
            扩大（parentPanel ）; 
        
    } } ，
    { 
        键： 分机EventObject中。W ， / / W为     
            
        
    
      S为南
        移： 为true ，
        CTRL ： 虚假，
        FN ： 函数（） { 
            VAR parentPanel southPanel ; 
            扩大（parentPanel ）; 
        
    } } 
）;

我们使用Ext.EventObject.X使其明显我们听哪个键，其余的应该是清楚的从上面的例子。然后，我们写的扩大（）函数下面：

function expand(parentPanel) {
    parentPanel.toggleCollapse();
    parentPanel.on('expand', function(){
        parentPanel.el.focus();
    });
    parentPanel.on('collapse', function(){
        viewport.el.focus();
    });
}

此功能切换面板倒塌，并重点就可以了，如果它被扩大，或折叠它，如果它已经展开，焦点返回到一个新的水平时，视口。

现在所有的代码是在地方，尽量扩大和倒塌面板按键与点击的小按钮，展开或折叠它们。这是键盘快很多！

下一步，我们将通过一个类似的过程，导航，设置和西面板上的信息标签。我叫他们子面板，因为他们是其他孩子parentPanels，我们已经看到。

{ 
    键： 分机。EventObject中S ， / / S为    
        
        
    

  我的    
        
        
    

  N为

我们遵循相同的模式，因为我们以前用过，但增加了一个变量称为“子面板。我们的扩展功能将不知道做什么这些，我们将重构它取决于是否子面板被宣告或不采取相应的行动。

功能扩展（parentPanel ，子面板） {

     （子面板） { 
        功能subPanelExpand （子面板） { 
            / /设置监听器扩展功能
            子面板。上（'扩大' ， 函数（） { 
                setTimeout的（函数（） { 子面板。集中（）;  }， 200 ）; 
            }）; 
            / /展开子面板的
            子面板。扩大（）; 
        }

         （parentPanel 。倒塌） { 
            / /封闭面板被折叠，打开它
            parentPanel 。展开（）; 
            subPanelExpand （子面板）; 
        } 
          （子面板。倒塌） { 
            / /子面板是开放的，只是需要重点
            子面板。重点（ ）; 
        } 
        否则 { 
            / / parentPanel没有倒塌，但子面板是
            subPanelExpand （子面板）; 
        } 
    } 
    否则 { 
        / /无子面板

尽管重点是在扩大的事件监听器，这是意味着向面板组后开火，它需要在包装的setTimeout，否则它的重点太早1焦点帧小于面板（即产生，它的重点，而它扩大）。补偿200毫秒内得到解决这个问题，这个问题是不符合目前parentPanel小号。

此时，您可以打开和关闭面板，以及关注他们，纯粹用键盘（如Shift + E或Ctrl + S）。当然，任何的Ext JS的功能可以触发由主要领导为母语的感觉应用的多种可能性的记者。

还有最后一个对象添加到我们的键盘映射，有两个标签，一个中心面板和其他旁边的“眼数据”选项卡。这将是有益的是能够关闭这些，你会在浏览器Ctrl + W的标签。

{ 
    键： 分机EventObject中W ， / / W到

我们已经配置了我们听按键和组件目前关注焦点管理的focusedCmp财产。如果目前焦点的组件是一个标签，它可关闭的，那么我们将焦点设置到父面板和销毁的标签。

固定网格

您可能已经注意到，当我们试图集中在网格中的行，它也不是没有可能的鼠标。如果你看一下在控制台，我们得到了一个线索，这是为什么，它报告“POS是不确定的”。click事件记录的信息传递，包括其在电网中的地位是什么。然而，使用FocusManager的，它不传递这一信息，所以我们需要模仿它通过一个指定的对象的行和列的属性。做以下视下面的变量：

VAR easttab =  20070114 。getCmp （“easttab ）;

VAR gridMap =  分机。创建（'Ext.util.KeyMap' ， 'eastPanel' ， [ 
    { 
        的 关键： '\ R' ， / /返回

试试这个，你会看到，我们可以成功地进入和退出使用键盘的电网。这一点很重要，我们指定的范围内，对这些键，否则你将无法逃脱从电网。

切换键盘映射

一个有用的功能，键盘映射，它可以很容易地启用或禁用。它可能是您不希望您的应用程序的大多数用户有一个对焦框，当他们点击元素，所以你可以做一个按钮（或其他键盘映射），使这种行为。

如果你想添加一个全球性的按键，打开和关闭键盘导航，你可以做以下：

VAR initMap =  分机创建（Ext.util.KeyMap“ ， 分机。getBody （）， { 
    键： 分机EventObject中。T ， / / T为

我们已经创建了一个新的键盘映射，将关闭Shift + T键盘导航和打开具有相同回来。我们是不能够使用现有的KEYMAP，因为它会转向自行关闭，将无法重新初始化。

结论

我们已经转换了，否则会一直无法进入使用键盘的面板的一系列复杂。我们也遇到了一些例子，我们不得不对焦点管理器的顶部添加一些自定义功能。

与键盘映射，我们了解到，我们可以跳转到不同的面板，以及调用的任何功能，我们通常会写一个按键。最后，用KeyNav我们看到左右移动箭头键的应用程序是多么容易。