0

使用 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();
    }
});​
4

1 回答 1

1

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

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

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

请参阅如何使用 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()。）

于 2012-12-15T02:08:56.930 回答