firefox 象吃了药那样,一段时间没用,发现居然出到8了,还支持鼠标右键菜单自定义了,
以往只能用JAVASCRIPT去实现,现在都很简单了,代码如下:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>testing menu</title>
<style>
.rotate {
-moz-transform: rotate(90deg);
}
.resize {
-moz-transform: scale(0.7);
}
</style>
</head><body><div contextmenu="supermenu">
<h1>Yo. Look at the source code.</h1>
<img src="http://people.mozilla.com/~prouget/bugs/context-menu-test/b.gif">
</div>
<menu type="context" id="supermenu">
<menuitem label="rotate" onclick="rotate()" icon="http://cdn1.iconfinder.com/data/icons/silk2/arrow_rotate_clockwise.png"></menuitem>
<menuitem label="resize" onclick="resize()" icon="http://cdn3.iconfinder.com/data/icons/fugue/icon/image-resize.png"></menuitem>
<menu label="share">
<menuitem label="twitter" onclick="alert('foo')"></menuitem>
<menuitem label="facebook" onclick="alert('bar')"></menuitem>
</menu>
</menu>
<script>
function rotate() { document.querySelector("img").classList.toggle("rotate"); }
function resize() { document.querySelector("img").classList.toggle("resize"); }
</script>
<style>@import url("http://paulrouget.com/style/pure.css")</style>
</body></html>
可以看到,DIV中的属性contextmenu定义了自定义菜单的ID,这里为supermenu
而在menu中,可以分层定义多个menu了,很简单,代码在上面就不再解析了
暂时只有FIREFOX支持这个特性
分享到：
相关推荐
6. **跨浏览器兼容性**：考虑到不同的用户可能使用不同的浏览器，开发者需要确保这个鼠标右键菜单能在主流浏览器（如Chrome、Firefox、Safari、Edge）中正常工作。 7. **响应式设计**：随着移动设备的普及，响应式...
由于不同的浏览器可能对事件处理和CSS样式支持程度不同，特别是老版本的Firefox（FF）和Internet Explorer（IE），开发者需要确保代码在这些浏览器中也能正常工作。通常，我们需要使用jQuery或者其他类似的库来处理...
// 这里展示自定义的右键菜单 }); ``` 接下来，我们来动态创建菜单项。在JavaScript中，我们可以使用`document.createElement`方法创建DOM元素，如`<li>`用于菜单项，`<a>`用于链接，`<hr>`用于分隔线。例如： ``...
标题中的“一个右键菜单，支持不同对象不同菜单，兼容IE、Firefox”指的是一个Web开发中的功能实现，它创建了一个自定义的右键上下文菜单，这个菜单可以根据用户点击的对象提供不同的选项，并且能在主流浏览器IE...
但是，由于这是鼠标右键菜单，你可能需要修改一些CSS规则，比如位置（position）、显示（display）以及对齐方式，确保菜单在鼠标点击的位置正确显示。 3. **JavaScript事件处理**：JavaScript是实现鼠标右键下拉...
jQuery鼠标右键点击菜单代码是基于JavaScript库jQuery的一款实用插件，主要应用于网页中的上下文菜单（context menu）功能。这种菜单通常会在用户在页面上右键点击时弹出，提供一系列可选的操作，比如“复制”、...
7. **跨浏览器兼容性**：由于不同的浏览器对某些API的支持程度不一，开发右键菜单脚本时需要考虑兼容性问题，确保在主流浏览器（如Chrome、Firefox、Safari、Edge等）中都能正常运行。 8. **版本控制**：“818a109...
在网页开发中，右键菜单通常用于提供用户自定义的操作选项，比如保存、复制、查看源代码等。JavaScript 是一种广泛使用的客户端脚本语言，它允许我们动态地操控网页元素，包括实现自定义的右键菜单功能。这篇文章将...
在JavaScript编程中，右键上下文菜单是一种常见的交互设计，它允许用户在鼠标右键点击时显示一个定制的菜单，提供额外的操作选项。"JS鼠标右键上下文菜单配置插件.zip" 提供了一个纯JavaScript实现的解决方案，适用...
这个名为"自定义 IE 鼠标右键弹出式.rar_javascript"的压缩包文件显然涉及到如何利用JavaScript来定制Internet Explorer浏览器的右键菜单。在网页中，鼠标右键点击通常会触发浏览器默认的上下文菜单，但通过...
标题"禁止文本框内的右键菜单"所涉及的知识点，就是如何阻止用户在文本框内点击鼠标右键时弹出默认的右键菜单，通常是为了防止用户进行诸如复制、粘贴等操作，或者是为了提供一个更加纯净的交互体验。 右键菜单是...
在本项目中，我们关注的是一个特定的功能——"右键菜单"，这通常指的是用户在鼠标右键点击时弹出的上下文菜单。这个功能在网页应用中非常常见，例如用于提供快捷操作或者自定义功能。 标题“右键菜单-jquery”表明...
8. **响应式设计**：对于移动设备，可能需要考虑触屏的长按事件来模拟右键菜单。同时，确保自定义菜单在不同屏幕尺寸下都能正确显示和工作。 9. **性能优化**：如果菜单项很多，为了提高性能，可以考虑使用懒加载或...
class2context插件一般能够很好地兼容现代浏览器，包括Chrome、Firefox、Safari、Edge等。对于较老的浏览器，可能需要检查其对JavaScript和CSS的兼容性。 通过以上介绍，我们可以看到class2context插件是网页开发中...
【非常简洁高效的JS右键菜单】是Web开发中一种实用的技术，主要用于在用户鼠标右键点击时显示自定义的上下文菜单。这篇文章由YoungPay在2010年4月发表于博客园，展示了如何使用JavaScript实现一个轻量级、高度可定制...
在网页中，通常使用浏览器默认的右键菜单，但通过JavaScript，我们可以监听鼠标右键点击事件（`contextmenu`），并在该事件触发时阻止默认菜单的弹出（通过`event.preventDefault()`），然后显示我们自定义的菜单。...
本文将介绍如何创建一个轻量级的XHTML右键菜单，该菜单支持Internet Explorer（IE）和Firefox。 在XHTML中，由于IE和Firefox对文档对象模型（DOM）处理方式的不同，特别是在处理`document.body`和`document....
- 确保代码在不同浏览器和设备上表现一致，考虑IE、Chrome、Firefox等主流浏览器的兼容性。 - 优化菜单的渲染速度，避免大量数据时的性能问题，比如使用懒加载技术只加载可视区域的数据。 8. **无障碍性...
尽管示例代码可能仅在IE中调试通过，但在实际应用中，为了更好的跨浏览器兼容性，我们还应考虑其他主流浏览器，如Chrome、Firefox、Safari等。使用如Babel这样的工具进行ES6语法转换，以及采用Modernizr等库检测...
标题“鼠标右键选中copy功能(IE&FF兼容)”涉及到的是网页开发中关于鼠标右键功能的实现，特别是如何实现在Internet Explorer（IE）和Firefox（FF）这两种不同的浏览器中，用户通过右键选择复制（Copy）的功能。...