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 相关文章推荐
CSS3字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 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
杏林同学录(八)
2006/10/09 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python解惑之True和False详解
2017/04/24 Python
Python模拟登陆实现代码
2017/06/14 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python selenium xpath定位操作
2020/09/01 Python
详解python polyscope库的安装和例程
2020/11/13 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
人力资源作业细则
2014/03/03 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
师范类求职信
2014/06/21 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python