键盘导航

翻译 2012年03月29日 23:09:42

键盘导航

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

我们要去一个比较复杂的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我们看到左右移动箭头键的应用程序是多么容易。

相关文章推荐

HTML键盘导航源码

  • 2016-06-17 15:30
  • 62KB
  • 下载

键盘导航网站

  • 2015-12-01 16:47
  • 64KB
  • 下载

android沉浸式导航栏与键盘的冲突

最近项目搞了沉浸式导航栏,但是与软键盘弹出冲突,布局不往上面顶,折腾几番之后,网上找到个方法但是不兼容华为 部分机型,于是做了修改,测试机型有限,我手头的机型是没有问题了,于是风向出来,直接用就行了。...

android 支持键盘导航

编写:zhaochunqi - 原文:http://developer.android.com/training/keyboard-input/navigation.html 除了软键盘输入法(...

ExtJS 4 官方指南翻译:键盘导航 Keyboard Navigation

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/keyboard_nav 翻译:frank/sp42 转载请保留本页信息 使用键盘的原因,无...

Android开发之透明导航栏状态栏后与软键盘产生冲突的问题解决

Android开发之透明导航栏状态栏后与软键盘产生冲突的问题解决
  • cmwly
  • cmwly
  • 2017-05-12 16:15
  • 143

实现Flex HotKey 键盘四个方向键(Navigation)导航功能

最近做的Flex项目,客户需要Flex做出来的UI能像Excel一样全键盘操作,除了Tab加Enter之外,特别需要能够支持四个方向键的操作支持,就像是Excel一样,当单元格中的文字处于全选状态的时...

XP屏幕键盘

  • 2017-07-14 00:24
  • 67KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)