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


Posted in HTML / CSS onJune 28, 2016

即使是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的主旨是提高易用性而不会有任何负面影响。我在菜单里放置的分享功能就是一个很好的例子。相信你在你的项目里也经常使用右键菜单,不是吗?

HTML / CSS 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 #HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 #HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 #HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 #HTML / CSS
You might like
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
JS backgroundImage控制
2009/05/19 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python易忽视知识点小结
2015/05/25 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python 实现目录复制的三种小结
2019/12/04 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
校本教研工作制度
2014/01/22 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Python面向对象之成员相关知识总结
2021/06/24 Python