DDR爱好者之家

HTML5中原生的右键菜单创建方法
站长资源 2024/12/27 佚名
7 1538
DDR爱好者之家 Design By 杰米

即使是JavaScript被禁止，这些右键菜单仍然能正常显示。所以，如果你想尊重用户的选择，最好的方法是用JavaScript来创建这些菜单元素，注入到DOM元素里，这样，当JavaScript被禁止时，这些右键菜单也不显示了。

HTML5中原生的右键菜单创建方法

HTML5规范里有一个被大家忽略里的好东西，那就是右键菜单。HTML5里的右键菜单规范显示，程序员可以通过创建简单的HTML5menu和menuitem标记来生成右键菜单。菜单只在指定区域的右键菜单内显示。所以，你不需要再通过创建浏览器插件来实现这种效果。下面就让我来展示如何用基本的HTML标记来创建个性化的右键菜单！

HTML代码

首先我们定义一个HTML区域，给它分配一个ID，之后我们要用到这个ID：

XML/HTML Code复制内容到剪贴板
  1. <section contextmenu="mymenu">  
  2.  <!--    
  3.   为了让代码清晰整洁   
  4.   我会把菜单放到这个元素内部    
  5.  -->  
  6. </section>  
  7.   

定义好这个元素后，现在我们来创建真正的菜单元素：

XML/HTML Code复制内容到剪贴板
  1. <menu type="context" id="mymenu">  
  2.  <menuitem label="重新加载本文" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>  
  3.  <menuitem label="跳跃至评论区" onclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem>  
  4.  <menu label="分享本文至..." icon="/images/share_icon.gif">  
  5.   <menuitem label="新浪微博" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>  
  6.   <menuitem label="QQ空间" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>  
  7.  </menu>  
  8. </menu>  
  9.   

注意，这里的menu标记的ID和上面的contextmenu里的值是一致的，这样做的效果是，只有在上面的那个section区域里点击右键时才会显示这些右键菜单。这些菜单里可以配置菜单名，菜单图标和onclick事件，用来声明它们的意义和要执行的动作。动作可以是预先定义的JavaScript动作，或是执行inline的JavaScript代码。相同的菜单可以放到页面的多个区域，不需要重复创建。

目前只有火狐浏览器是唯一实现了这个API的浏览器。一些特别重要的功能我一般不喜欢放到右键菜单里，但有这样的功能当然是十分方便，这个API的主旨是提高易用性而不会有任何负面影响。我在菜单里放置的分享功能就是一个很好的例子。相信你在你的项目里也经常使用右键菜单，不是吗？

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米