天天看点

《HTML5 开发实例大全》——1.11 实现右键菜单功能

本节书摘来自异步社区《html5 开发实例大全》一书中的第1章,第1.11节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

《HTML5 开发实例大全》——1.11 实现右键菜单功能

https://yqfile.alicdn.com/93674791126ecfdd72c2c7d0698d113c2e2f9625.png" >

实例说明

我们知道鼠标右键的功能非常强大,在网页中单击后会显示一些常用的快捷键,例如,在firefox浏览器打开的网页中,单击右键后会弹出如图1-20所示的快捷菜单。

《HTML5 开发实例大全》——1.11 实现右键菜单功能

本实例的功能是,为浏览器添加几个右键菜单选项,这个功能可以通过html 5中的< contextmenu >、< menu >、< menuitem >联合实现。在上一个实例中已经讲解了< menu >的基本用法,接下来看< contextmenu >和< menuitem >的基本知识。

(1)contextmenu。

在html 5中,每个元素新增了一个属性:contextmenu。属性contextmenu表示上下文菜单,即鼠标右击元素会出现一个菜单。

(2)< menuitem >。

在< menu > < /menu >内部可以嵌入一个菜单项,即< menuitem >< /menuitem >。menuitem有如下3个属性。

label:菜单项显示的名称。

icon:在菜单项左侧显示的图标。

onclick:单击菜单项触发的事件。

具体实现

使用dreamweaver创建一个名为“011.html”的文件,具体代码如下所示:

运行网页程序后,当鼠标右击< div >时就会出现菜单效果,如图1-21所示。

《HTML5 开发实例大全》——1.11 实现右键菜单功能

读者在此需要注意,目前只有火狐浏览器支持上述功能效果。

继续阅读