Scheduler 及其各元素可通过单独按键或组合键进行访问。本文将全面介绍 Scheduler 的键盘导航,包括焦点行为、内置快捷键以及如何自定义快捷键。
要在 Scheduler 中启用键盘导航,只需在页面上激活 key_nav 扩展。
scheduler.plugins({
key_nav: true
});
按下 Tab 键会将焦点设置到 Scheduler,就像其他元素一样。获得焦点后,可以使用方向键和其他快捷键在 Scheduler 内部导航。
再次按下 Tab 键会将焦点从 Scheduler 移到页面上的其他元素。
当模态窗口(如 lightbox 或确认窗口)打开时,焦点会从 Scheduler 转移到该窗口,可以像在常规表单中一样进行导航。关闭窗口后,焦点会返回到 Scheduler。
如需通过编程方式将焦点返回到 Scheduler,请使用 focus 方法:
scheduler.focus();
当 Scheduler 重新获得焦点时,焦点会放在内部的活动元素、第一行或最近选中的项目上。
模态窗口内的默认导航操作包括:
如果焦点在表单按钮上,按下 Space 或 Enter 会触发该按钮的操作,而不是默认行为。
被聚焦的单元格默认以灰色/黄色背景高亮显示。要自定义此样式,可修改 .dhx_focus_slot CSS 类:
<style>
.dhx_focus_slot{
background-color: #fff;
}
</style>
键盘操作取决于上下文,即可以为 Scheduler 内的不同元素(作用域)分配不同的快捷键。可用的作用域有:
如果同一个快捷键分配给多个作用域,则附加在更具体元素上的快捷键优先生效。例如,事件上的快捷键会覆盖分配给整个 Scheduler 的相同快捷键。
要添加新的键盘快捷键,请使用 addShortcut 方法,需传入三个参数:
scheduler.addShortcut("shift+w", function(e){
var target = e.target;
if(target.closest("[event_id]"))
var eventId = target.getAttribute("event_id");
if(eventId)
scheduler.showQuickInfo(eventId);
},"event");
要从某个作用域移除快捷键,请使用 removeShortcut 方法,需传入两个参数:
scheduler.removeShortcut("shift+w","event");
可以使用 getShortcutHandler 获取某个快捷键的处理函数,需传入:
var shortcut_handler = scheduler.getShortcutHandler("shift+w","event");
此方法返回处理该快捷键的函数。
快捷键可以由以下几种组合构成:
如需让多个组合键触发同一操作,可用逗号分隔,如 "ctrl+a, ctrl+space"。
Scheduler 内置了一组用于导航的快捷键:
Related sample: Keyboard Navigation and WAI-ARIA - Flat Skin
Related sample: Keyboard navigation in the scheduler