开发者论坛

 找回密码
 注册 (请使用非IE浏览器)
查看: 4202|回复: 0

Kendo UI Web开发:轻松实现网格键盘导航

[复制链接]

0

精华

8

贡献

1768

赞扬

特约版主

帖子
583
软币
4524
在线时间
275 小时
注册时间
2019-2-21
发表于 2020-9-27 09:36:39 | 显示全部楼层 |阅读模式
Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
键盘导航
Grid通过可导航选项支持其键盘导航功能,设置为true时,您可以首先选择一个行或单元格,然后使用箭头键在网格内移动。不管可选模式是什么,导航都在单元格级别进行。 要选择当前行或单元格,请按空格键。
下面的示例演示如何在Grid中启用键导航。
[JavaScript] 纯文本查看 复制代码
$("#grid").kendoGrid({
navigatable: true
// Other configuration.
});

Grid的键盘导航通过侦听小部件wrapper元素上的keydown事件来工作,它的操作是基于这样的假设:用户所做的任何操作都符合当前关注的Grid单元格,而不符合浏览器关注的元素。如果网格的数据单元格包含必须通过键盘激活的超链接:
  • 使用箭头键导航到相应的网格单元格。
  • 按Enter键将超链接聚焦到单元格内。
  • 再次按Enter。
若要将焦点返回到表格单元格,请按Esc。 为了使通过标签无法访问超链接,请将abindex="-1" 属性设置为自定义超链接。
您也可以避免该过程,并绕过Grid的键盘导航,使用制表符访问自定义超链接,然后使用Enter激活它们。 为此,请防止自定义超链接的keydown事件冒泡。 因此,网格将不会注意到Enter键。



回复

使用道具 举报

Archiver|手机版|小黑屋|开发者网 ( 苏ICP备08004430号-2 )
版权所有:南京韵文教育信息咨询有限公司

GMT+8, 2024-4-18 09:28

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表