Html5开发学习(4)：contextmenu――右键菜单

上一篇：/kf/201203/124948.htML 

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，下面的代码演示了如何实现一个鼠标右击菜单：
p style='display:inline' contextmenu="mymenu"> 右击我试试/p>

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://up.2cto.com/2012/0407/20120407090812492.gif" onclick="alert('这是菜单3-1'); ">
    /menuitem>
    menu label="菜单3-2" >  
       menuitem label="菜单3-2-1" icon="http://up.2cto.com/2012/0407/20120407090813196.gif" onclick="alert('这是菜单3-2-1'); ">
       /menuitem>
    /menu>
  /menu>
/menu>

 这样，鼠标右击p> 时，就会出现菜单效果如下：

上一篇：/kf/201203/124948.html 

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，下面的代码演示了如何实现一个鼠标右击菜单：
p style='display:inline' contextmenu="mymenu"> 右击我试试/p>

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://up.2cto.com/2012/0407/20120407090812492.gif" onclick="alert('这是菜单3-1'); ">
    /menuitem>
    menu label="菜单3-2" >  
       menuitem label="菜单3-2-1" icon="http://up.2cto.com/2012/0407/20120407090813196.gif" onclick="alert('这是菜单3-2-1'); ">
       /menuitem>
    /menu>
  /menu>
/menu>

 这样，鼠标右击p> 时，就会出现菜单效果如下：

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！