首页 > 作文

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

更新时间:2023-04-03 04:50:32 阅读: 评论:0

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

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

html代码

首先我们定义一个html区域,给它分配一个id,之后我们要用到这个id:

xml/html code
复制内容到剪贴板

<ctioncontextmenu=“mymenu”><!– 为了让代码清晰整洁 我会把菜单放到这个元素内部 ></ction>

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

xml/html code
复制内容到剪贴板

<menutype=“context”id=“mymenu”><menuitemlabel=“重新加载本文”onclick=“window.location.reload();”icon=“/images/refresh-icon.png”></menuitem山东潍坊医学院><menuitemlabel=“跳跃至评论区”onclick=劳务费起征点220;window.location=’#comments’;”icon=“/images/comment_icon.gif”></menuitem>小学三年级英语;<menulabel=“分享本文至…”icon=“/images/share葡萄英文_icon.gif”><menuitemlabel=“新浪微博”icon=“/images/twitter_icon.gif”onclick=“goto(‘//twitter.com/intent/tweet?text=’+document.title+‘:‘+window.location.href);”></menuitem><menuitemlabel=“qq空间”icon=“/images/facebook_icon16x16.gif”onclick=“goto(‘//facebook.com/sharer/sharer.php?u=’+window.location.href);”></menuitem></menu></menu>

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

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

本文发布于:2023-04-03 04:50:31,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/407cf03d818a8ac8d5325a4cf2b4634f.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:HTML5中原生的右键菜单创建方法.doc

本文 PDF 下载地址:HTML5中原生的右键菜单创建方法.pdf

标签:右键菜单   菜单   元素   区域
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图