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动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 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实现xml与json之间的相互转换功能实例
2016/07/07 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
js密码强度校验
2015/11/10 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
基于python的列表list和集合set操作
2019/11/24 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
《盲人摸象》教学反思
2014/02/16 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
销售业务员岗位职责
2015/02/13 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
2015元旦感言
2015/12/09 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书