我是've a few websites like google-docs and map-quest that have custom drop down menus when you right-click. Somehow they override the browser'下拉菜单的行为,我现在确切知道他们是如何做到的 . 我找到了jQuery plugin这样做,但我仍然对一些事情感到好奇:
-
这是如何工作的?浏览器的下拉菜单是否实际被覆盖,或者效果是否只是模拟?如果是这样,怎么样?
-
插件抽象了什么?幕后发生了什么?
-
这是实现这种效果的唯一方法吗?
See several custom-context menus in action
7 回答
我知道这个问题已经很老了,但是我想出了同样的问题并自己解决了,所以我回答以防万一有人通过谷歌发现这个问题 . 我的解决方案基于@Andrew的解决方案,但之后基本上修改了所有内容 .
EDIT :看到最近有多受欢迎,我决定更新样式,使它看起来更像2014年,而不像Windows 95.我修复了@Quantico和@Trengot发现的错误,所以现在它是一个更加坚实的答案 .
EDIT 2 :我使用StackSnippets进行设置,因为它们是一个非常酷的新功能 . 我将 good jsfiddle 留在这里作为参考思路(点击第4个面板查看它们的工作情况) .
新的堆栈代码:
注意:您可能会看到一些小错误(远离光标的下拉等),请确保它在jsfiddle中工作,因为它与您的网页更相似,而不是StackSnippets .
正如Adrian所说,插件将以相同的方式工作 . 您需要三个基本部分:
1:
'contextmenu'
事件的事件处理程序:在这里,您可以将事件处理程序绑定到要为其显示菜单的任何选择器 . 我选择了整个文件 .
2:
'click'
事件的事件处理程序(关闭自定义菜单):3:CSS控制菜单的位置:
CSS的重要之处在于包含
z-index
和position: absolute
将所有这些包装在一个光滑的jQuery插件中并不是太难 .
你可以在这里看到一个简单的演示:http://jsfiddle.net/andrewwhitaker/fELma/
正在覆盖浏览器的上下文菜单 . 无法在任何主要浏览器中扩充本机上下文菜单 .
由于插件正在创建自己的菜单,因此实际抽象的唯一部分是浏览器的上下文菜单事件 . 该插件根据您的配置创建一个html菜单,然后将该内容放在您的点击位置 .
是的,这是创建自定义上下文菜单的唯一方法 . 显然,不同的插件做的事情略有不同,但它们都会覆盖浏览器的事件,并将自己的基于html的菜单放在正确的位置 .
这是javascript中右键单击上下文菜单的示例:Right Click Context Menu
使用原始javasScript代码进行上下文菜单功能 . 你能检查一下吗,希望这会对你有所帮助 .
现场代码:
您可以观看本教程:http://www.youtube.com/watch?v=iDyEfKWCzhg确保首先隐藏上下文菜单并具有绝对位置 . 这将确保不会有多个上下文菜单和无用的上下文菜单创建 . 该页面的链接位于YouTube视频的说明中 .
我知道这也很老了 . 我最近需要创建一个上下文菜单,我将其注入其他具有不同属性的网站,这些网站基于所单击的元素 .
它相当粗糙,并且可能有更好的方法来实现这一目标 . 它使用jQuery Context菜单库Located Here
我喜欢创造它,虽然你们可能会有一些用处 .
这是fiddle . 我希望它可以帮助那里的人 .