祥叔学编程

祥叔学编程
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Html5开发学习(4):contextmenu——右键菜单

Posted on 2012-04-01 10:44  祥叔  阅读(4562)  评论(3编辑  收藏  举报

1,contextmenu
在Html5中,每个元素新增了一个属性:contextmenu
contextmenu 是上下文菜单,即鼠标右击元素会出现一个菜单。

 

2,<menu>
要实现鼠标右击元素会出现一个菜单,还必须了解html5里新增的另一个元素:<menu>
顾名思义<menu>是定义菜单的,
<menu> 元素属性:
    type :菜单类型属。
        有三个值
        1)context:上下文;
        2)toolbar:工具栏;
        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="http://d.lanrentuku.com/down/gif/gif-0184.gif" onclick="alert('这是菜单3-1');">
</menuitem>
<menu label="菜单3-2" >
<menuitem label="菜单3-2-1" icon="http://d.lanrentuku.com/down/gif/gif-0171.gif" onclick="alert('这是菜单3-2-1');">
</menuitem>
</menu>
</menu>
</menu>

 这样,鼠标右击<div>时,就会出现菜单效果如下:


注:目前只有火狐浏览器支持<menu>,所以有兴趣的同学,可以在火狐浏览器下试试。

原文地址: http://www.cnblogs.com/xumingxiang/archive/2012/04/01/2428152.html

作者 : 徐明祥
出处:http://www.cnblogs.com/xumingxiang 
版权:本文版权归作者和博客园共有
转载:欢迎转载,为了保存作者的创作热情,请按要求【转载】,谢谢
要求:未经作者同意,必须保留此段声明;必须在文章中给出原文连接;否则必究法律责任