当前位置: 代码迷 >> Web前端 >> firefox 八支持鼠标右键菜单自定义了
  详细解决方案

firefox 八支持鼠标右键菜单自定义了

热度:158   发布时间:2012-11-23 22:54:33.0
firefox 8支持鼠标右键菜单自定义了
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支持这个特性
1 楼 showermj 2011-12-06  
这个菜单函数能传参数吗?想做个表格按行弹菜单的
  相关解决方案