如何用键盘快捷键打开popover?

时间:2012-09-19 15:02:06

标签: javascript css safari-extension

  

可能重复:
  Keyboard shortcuts with jQuery

我想使用快捷键显示弹出窗口,而不是单击工具栏上的图标。 你有什么好主意吗? 谢谢你的帮助。

3 个答案:

答案 0 :(得分:3)

假设你的快捷方式是 Ctrl + H ,这应该是:

var ctrlDown = false;
$(document).keydown(function(e) {
    if(e.keyCode == 17) ctrlDown = true;
}).keyup(function(e) {
    if(e.keyCode == 17) ctrlDown = false;
});
$(document).keydown(function(e) {
    if(ctrlDown && e.keyCode == 72) showPopUp(); //72 is for h
});

以下是JavaScript keyCodes的参考:little link

这是一个小小的演示:little link。 (它使用 Ctrl + M 来避免浏览器热键冲突。)

答案 1 :(得分:3)

Abody97的回答告诉您如何确定是否按下了某个键组合。如果您不确定如何获得该键组合来显示弹出窗口,这就是您所需要的。不幸的是,Safari使这种情况变得不必要了。

在全局脚本中,你需要一个类似下面的函数来显示一个popover,给出它的ID和应该显示它的工具栏项的ID:

function showPopover(toolbarItemId, popoverId) {
    var toolbarItem = safari.extension.toolbarItems.filter(function (button) {
        return button.identifier == toolbarItemId && button.browserWindow == safari.application.activeBrowserWindow;
    })[0];
    var popover = safari.extension.popovers.filter(function (popover) {
        return popover.identifier == popoverId;
    })[0];
    toolbarItem.popover = popover;
    toolbarItem.showPopover();  
}

您还需要在全局脚本的消息侦听器中调用此函数的代码,如下所示(此示例不假设您已经有消息侦听器):

safari.application.addEventListener('message', function (e) {
    if (e.name == 'Show Popover') {
        showPopover(e.message.toolbarItemId, e.message.popoverId);
    }
}, false);

最后,在您注入的脚本中,侦听键组合的函数需要调用dispatchMessage,如下所示:

safari.self.tab.dispatchMessage('Show Popover', {
    toolbarItemId : 'my_pretty_toolbar_item',
    popoverId     : 'my_pretty_popover'
});

(在Abody97的代码示例中代替showPopUp()。)

注意:如果您只有一个工具栏项和一个弹出窗口(并且从不计划添加更多),那么它会变得更加简单。假设您已将弹出窗口分配给Extension Builder中的工具栏项,则可以使用

safari.extension.toolbarItems[0].showPopover();

代替全局消息侦听器中对showPopover的调用,并在注入的脚本中忽略对dispatchMessage的调用中的消息值。

答案 2 :(得分:0)

我相信这可以帮到你:http://api.jquery.com/keypress/

在以下示例中,检查是否按下了“return / enter”(编号为13)。

$("#whatever").keypress(function(event) {
   if( event.which == 13 ) {
   alert("Return key was pressed!");
   }   
});
相关问题