Question

使用JQuery，我想用搜索栏创建一个Javascript上下文菜单。搜索栏将允许用户使用上下文菜单搜索要执行的操作。搜索菜单将返回诸如“剪切”，“复制”或“粘贴”之类的结果有没有办法使用HTML5和JavaScript实现此目的？

这是jsfiddle上未完成的实现：http://jsfiddle.net/fELma/292/

另外，我还没有弄清楚如何使用event.target选择div的所有子元素：

$(document).bind("click", function(event) {
    if (!$(event.target).is(".custom-menu")) { //how can I select all the child elements of .custom-menu?
        $("div.custom-menu").hide();
    }
});

Answer 1

搜索栏将允许用户使用上下文菜单搜索要执行的操作。

jQuery UI实现了Autocomplete widget以及许多其他类型的用户界面控件。您需要编写代码来确定当前所选元素的可能操作，并相应地更新小部件。

搜索菜单会返回“剪切”，“复制”或“粘贴”等结果

请参阅How to copy text to the client's clipboard using jQuery?，其中提到了在Internet Explorer以外的浏览器中访问系统剪贴板的安全限制。有些人使用Flash来解决限制，但在您的情况下，您必须将Flash小程序覆盖在“剪切”或“复制”菜单项上。我不知道绕过“粘贴”限制的方法。

您可以实现自己的剪贴板，但这可能会使可能尝试在您的网站和其他应用程序之间复制和粘贴的用户感到困惑。他们必须记住使用 Ctrl + C 和 Ctrl + V 而不是自定义菜单。

另外，我还没有弄清楚如何使用event.target选择div的所有子元素：

您可以使用.custom-menu, .custom-menu > *作为选择器，或者如果您想要包含所有后代（而不仅仅是直接子项），.custom-menu *。

在您的情况下，您可以使用.on()而不是自己检查event.target：

$(document).on("click", ".custom-menu, .custom-menu *", function(event) {
    $("div.custom-menu").hide();
});

（在早于1.7的jQuery版本中，请改用.delegate()。）

带搜索栏的Javascript上下文菜单

1 个答案: