Html5開發學習(4)：contextmenu——右鍵菜單

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 
版權：本文版權歸作者和博客園共有
轉載：歡迎轉載，為了保存作者的創作熱情，請按要求【轉載】，謝謝
要求：未經作者同意，必須保留此段聲明；必須在文章中給出原文連接；否則必究法律責任