Html5开发学习(4)：contextmenu——右键菜单
上一篇：http://www.zzzyk.com/kf/201203/124948.html
1，contextmenu
在Html5中，每个元素新增了一个属性：contextmenu
contextmenu 是上下文菜单，即鼠标右击元素会出现一个菜单。
2，<menu>
要实现鼠标右击元素会出现一个菜单，还必须了解html5里新增的另一个元素:<menu>
顾名思义<menu>是定义菜单的，
<menu> 元素属性：
type ：菜单类型属。
有三个值
1）context：上下文；
2）易做图：工具栏；
3）list：列表
label ：菜单显示的名称。
3，<menuitem>
<menu> </menu>内部可以嵌入一个一个菜单项，即<menuitem></menuitem>。
menuitem 属性：
label：菜单项显示的名称
icon：在菜单项左侧显示的图标
onclick：点击菜单项触发的事件
4，下面的代码演示了如何实现一个鼠标右击菜单：
<div style='display:inline' contextmenu="mymenu">右击我试试</div>
<menu type="context" id="mymenu">
<menuitem label="菜单1" onclick="alert('这是菜单1');" icon="http://d.lanrentuku.com/down/gif/gif-0145.gif"></menuitem>
<menuitem label="菜单2" onclick="alert('这是菜单2');" icon="http://d.lanrentuku.com/down/gif/gif-0161.gif"></menuitem>
<menu label="菜单3">
<menuitem label="菜单3-1" icon="/2012/0407/20120407090812492.gif" onclick="alert('这是菜单3-1');">
</menuitem>
<menu label="菜单3-2" >
<menuitem label="菜单3-2-1" icon="/2012/0407/20120407090813196.gif" onclick="alert('这是菜单3-2-1');">
</menuitem>
</menu>
</menu>
</menu>
这样，鼠标右击<div>时，就会出现菜单效果如下：
注：目前只有火狐浏览器支持<menu>，所以有兴趣的同学，可以在火狐浏览器下试试。
作者 : 易做图祥
补充：web前端 , HTML 5 ,
