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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
使用CSS实现音波加载效果
May 07 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
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php实现zip文件解压操作
2015/11/03 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
TensorFlow的权值更新方法
2018/06/14 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python内置函数及功能简介汇总
2020/10/13 Python
python中if嵌套命令实例讲解
2021/02/25 Python
学校做一个有道德的人活动方案
2014/08/23 职场文书
党在我心中演讲稿
2014/09/02 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
蓬莱阁导游词
2015/02/04 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015年统战工作总结
2015/05/19 职场文书
新学期开学标语2015
2015/07/16 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书