利用HTML 5中的Menu和Menuitem元素快速创建菜单
原文:Introducing the HTML5 “Menu” and “Menuitem” Elements
译文:HTML 5中Menu和Menuitem的元素介绍
译者:dwqs
今天向你介绍HTML 5中的两个元素:Menu和Menuitem,这两个元素是W3C交互元素中的一部分。现在Web的演变已经不仅仅局限于文档之间的链接,在APPs中,页面的行为越来越多,因此,是时候形成一个Web交互的标准了。
Menu和Menuitem是在开发者中谈论最热门的两个元素,可能是由于主流浏览器对其缺乏足够的支持。在我写这篇文章的时候,FireFox已经实现了这个元素。
Menu和Nav的对比
当谈到Menu时,难免不和Nav元素混淆。区分这两个元素,文档规范是一个不错的工具。
Nav元素是HTML导航元素,代表着Web页面的导航块,一般包含一个links集合,允许用户在页面内跳转或者跳转到其它网站页面。
Menu是一系列菜单命令的集合,跟桌面或者手机应用有点相似。桌面应用通常使用工具条菜单或者上下文菜单来展现各种任务。Nav和Menu最根本的不同之处在于:Nav元素包含导航链接去帮助用户在Web页面之间跳转,而Menu应该让用户执行特定的任务。
使用Menu元素
在 一个容器中,Menu元素用于创建上下文、工具栏和弹出菜单。然而,后面的两个功能还没有浏览器实现,包括FireFox。此刻,很难去猜测浏览会怎么实 现他们以及看起来会是什么样子。不过对于toolbar和popup菜单的规范在下一代交互设计中做些改变也是一个不错的机会。
对于现在,我们将集中注意力到上下文。
上下文
当我们右击一个应用时,会出现一个上下文菜单。显示的选项取决于用户在哪里点击。
JavaScript 选项
通过JavaScript和JQuery插件在Web页面上添加上下文菜单是可以实现的。问题是这种方法需要额外的标记,并且脚本会删除浏览器本地的菜单,如果处理不当,将会使用户感到失望。
本地解决方案
Menu和Menuitem一起使用,将把新的菜单合并到本地的上下文菜单。例如,给body添加一个叫“Hello World”的菜单
<body contextmenu="new-context-menu">
<menu id="new-context-menu" type="context">
<menuitem>Hello World</menuitem>
</menu>
</body>
在上述代码片段中,包含的基本属性有id,type和contextmenu—它指定了菜单类型是context,同时也指定了新的菜单项应该被显示的区域。
在示例中,当右击鼠标时,新的菜单项将出现在文档的任何地方,因为我们指定它的作用区域是body。
当然,你可以通过在特定的元素上给contextmenu赋值,例如div,main,section等等,来限制新菜单项的作用区域。
<body>
<div contextmenu="new-context-menu">
<!-- content -->
</div>
<menu id="new-context-menu" type="context">
<menuitem>Hello World</menuitem>
</menu>
</body>
当在FireFox中查看时,会发现新添加的菜单项被添加到最顶部。
添加子菜单和图标
子菜单由一组相似或相互的菜单项组成。PS中的Image Rotation就是一个典型的例子。使用Menu添加子菜单是非常容易和直观的。查看下面的示例代码:
<menu id="demo-image" type="context">
<menu label="Image Rotation">
<menuitem>Rotate 90</menuitem>
<menuitem>Rotate 180</menuitem>
<menuitem>Flip Horizontally</menuitem>
<menuitem>Flip Vertically</menuitem>
</menu>
</menu>
在支持Menu元素的浏览器中运行时,将看到新菜单中添加的四个子菜单:
图标
介绍一个新的属性:icon,使用这个属性可以在菜单的旁边添加图标。值得一提的是,icon属性只能在menuitem元素中使用。示例代码:
<menu id="demo-image" type="context">
<menu label="Image Rotation">
<menuitem icon="img/arrow-return-090.png">Rotate 90</menuitem>
<menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem>
<menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem>
<menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem>
</menu>
</menu>
结果如你所见的:
在菜单中添加功能
.rotate-90 {
transform: rotate(90deg);
}
为了使用这个样式,需要写一个函数将它应用到图像。
function imageRotation(name) {
document.getElementById('image').className = name;
}
把这个函数和每一个menuitem的onclick属性关联,并且传递一个参数:rotate-90
<menu id="demo-image" type="context">
<menu label="Image Rotation">
<menuitem onclick="imageRotation('rotate-90')" icon="img/arrow-return-090.png">Rotate 90</menuitem>
<menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem>
<menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem>
<menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem>
</menu>
</menu>
完成这个之后,再创建将图片旋转180度和裁剪图片的样式,将每一个函数添加到独立的menuitem中,记得传参数 。查看效果:in the demo page.
查看更多关于Menu元素的信息:Interactive Element: The Menu Element
查看我的示例:http://jsfiddle.net/Web_Code/15pc5zfv/1/embedded/result/
利用HTML 5中的Menu和Menuitem元素快速创建菜单的更多相关文章
- Android——在活动中使用Menu
ADT在HelloWorldActivity中自动创建了一个onCreateOptionsMenu()方法.这个方法是用于在活动中创建菜单的,现在我们来仔细分析一下了.手机毕竟和电脑不同,它的屏幕空间 ...
- 在活动中使用Menu
1.在res下创建menu普通文件夹,在menu下创建名为main的Menu资源文件 2.在menu组件下创建item组件:资源id,title标题名称 3.覆盖活动中的onCreateOptions ...
- Android菜单详解(一)——理解android中的Menu
前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至 ...
- 在Activity中使用Menu
1.右击res-->New-->Directory输入文件名menu,在此文件夹下新建main菜单文件:右击menu-->New-->Menu resource file 2. ...
- Android 在活动中使用 Menu
•前行必备--创建 menu 首先,新建一个项目,选择 Empty Activity 选项,并命名为 Test Menu: 这样 Android Studio 自动为我们新建 MainActivity ...
- cocos2d-x Menu、MenuItem
转自:http://codingnow.cn/cocos2d-x/832.html 学习cocos2d-x中的菜单主要需要了解:菜单(CCMenu)和菜单项(CCMenuItem)以及CCMenuIt ...
- (转)Java程序利用main函数中args参数实现参数的传递
Java程序利用main函数中args参数实现参数的传递 1.运行Java程序的同时,可以通过输入参数给main函数中的接收参数数组args[],供程序内部使用!即当你在Java命令行后面带上参数,J ...
- Android中的Menu
Android中的设置按钮:长按或点击菜单键 1.长按选项: 布局文件: <LinearLayout xmlns:android="http://schemas.android.com ...
- R语言:利用caret包中的dummyVars函数进行虚拟变量处理
dummyVars函数:dummyVars creates a full set of dummy variables (i.e. less than full rank parameterizati ...
随机推荐
- 每用户订阅上的所有者 SID 不存在 (异常来自 HRESULT:0x80040207)
出现这个问题是因为pQueryFilter.WhereClause = "RoomNumber=" +cmbFromPoint.SelectedItem;中的cmbFromPoin ...
- Shell最多支持多少个参数
本文转自:http://www.jb51.net/article/56548.htm 这篇文章主要介绍了Shell最多支持多少个参数?本文是对Shell最多可以输入多少个参数的一篇测试文章,需要的 ...
- 持久化框架Hibernate 开发实例(二)
1 简述 通过使用Hibernate框架,开发者可以使用面向对象的方式来进行数据库访问,从而取代 以前使用JDBC进行数据库访问的方式.通过使用Hibernate框架,web应用可以通过面向 对象的方 ...
- Android Handler传值方式
前面介绍handler的时候,也用到过几种传值方式,今天来总结一下,并且重点说一下bundle方式,代码如下: package com.handlerThread; import android.ap ...
- Java中中文拼音的排序问题
最近做一个手机数据同步的应用开发,需要提供地址簿信息按照姓名的拼音次序进行排序.但仔细考察Java提供的Collator之后,发现其中文拼音排序存在严重的问题.Java提供Collator来支持不同语 ...
- 英文论文写作之讨论与结论Discussion and Conclusion
Discussion and Conclusion After viewing these maps, what should immediately appear is the level of r ...
- VC 6.0 LNK2005 错误 处理
造成LNK2005错误主要有以下几种情况: 1.重复定义全局变量.可能存在两种情况: A.对于一些初学编程的程序员,有时候会以为需要使用全局变量的地方就可以使用定义申明一下.其实这是错误的,全局变量是 ...
- 宏buf_pool_t
typedef struct buf_pool_struct buf_pool_t; struct buf_pool_struct{ /** @name General fields */ /* @{ ...
- bzoj4025
首先我们要知道,怎么去维护一个是否是二分图 二分图的充要条件:点数>=2且无奇环 重点就是不存在奇环,怎么做呢 考虑随便维护一个图的生成树,不难发现,如果一条边加入后,形成奇环的话就不是二分图 ...
- 如何在Asp.Net WebApi接口中,验证请求参数中是否携带token标识!
[BasicAuthentication] public abstract class ApiControllerBase : ApiController { #region Gloal Proper ...