原文：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>

结果如你所见的：

在菜单中添加功能

          我们已经构建了一些看起来像菜单的示例，但是是没有任何功能都的。当点击菜单时，用户期待一些事情发生。例如点击Copy应该要复制文本或链接，点击New Folder应该创建一个新的文件夹。可以用JavaScript实现这些功能。
          注意：在开始之前，我建议你在JavaScript Fundamentals 看一看Jeremy McPeak’s的课程，对于任何想学习JavaScript的人都是一个不错的开始。
          利用上面的“Image Rotation”为例，让我们添加一个当点击时旋转图像的功能。CSS 3的Transform and Transition可以在浏览器中为我们实现这个功能。将图像旋转90度的样式如下：
.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元素快速创建菜单的更多相关文章

  1. Android——在活动中使用Menu

    ADT在HelloWorldActivity中自动创建了一个onCreateOptionsMenu()方法.这个方法是用于在活动中创建菜单的,现在我们来仔细分析一下了.手机毕竟和电脑不同,它的屏幕空间 ...

  2. 在活动中使用Menu

    1.在res下创建menu普通文件夹,在menu下创建名为main的Menu资源文件 2.在menu组件下创建item组件:资源id,title标题名称 3.覆盖活动中的onCreateOptions ...

  3. Android菜单详解（一）——理解android中的Menu

    前言 今天看了pro android 3中menu这一章,对Android的整个menu体系有了进一步的了解,故整理下笔记与大家分享. PS:强烈推荐<Pro Android 3>,是我至 ...

  4. 在Activity中使用Menu

    1.右击res-->New-->Directory输入文件名menu,在此文件夹下新建main菜单文件:右击menu-->New-->Menu resource file 2. ...

  5. Android 在活动中使用 Menu

    •前行必备--创建 menu 首先,新建一个项目,选择 Empty Activity 选项,并命名为 Test Menu: 这样 Android Studio 自动为我们新建 MainActivity ...

  6. cocos2d-x Menu、MenuItem

    转自:http://codingnow.cn/cocos2d-x/832.html 学习cocos2d-x中的菜单主要需要了解:菜单(CCMenu)和菜单项(CCMenuItem)以及CCMenuIt ...

  7. (转)Java程序利用main函数中args参数实现参数的传递

    Java程序利用main函数中args参数实现参数的传递 1.运行Java程序的同时,可以通过输入参数给main函数中的接收参数数组args[],供程序内部使用!即当你在Java命令行后面带上参数,J ...

  8. Android中的Menu

    Android中的设置按钮:长按或点击菜单键 1.长按选项: 布局文件: <LinearLayout xmlns:android="http://schemas.android.com ...

  9. R语言：利用caret包中的dummyVars函数进行虚拟变量处理

    dummyVars函数:dummyVars creates a full set of dummy variables (i.e. less than full rank parameterizati ...

随机推荐

  1. ScannerDemo------string int

    import java.util.Scanner;                                                /** *Scanner演示 */ public cl ...

  2. Java API —— IO流(数据操作流 & 内存操作流 & 打印流 & 标准输入输出流 & 随机访问流 & 合并流 & 序列化流 & Properties & NIO)

    1.操作基本数据类型的流     1) 操作基本数据类型 · DataInputStream:数据输入流允许应用程序以与机器无关方式从底层输入流中读取基本 Java 数据类型.应用程序可以使用数据输出 ...

  3. AXURE制作APP抽屉式菜单

    1.拖一个dynamic panel到窗体,将State1改名为State_首页: 2.拖2个dynamic panel到State_首页中,分别命名为侧边菜单及首页内容,首页内容盖住侧边菜单: 3. ...

  4. NuGet学习笔记

    NuGet学习笔记(1)——初识NuGet及快速安装使用 NuGet学习笔记(2)——使用图形化界面打包自己的类库 NuGet学习笔记(3)——搭建属于自己的NuGet服务器

  5. openfire的配置

    Openfire 采用Java开发,开源的实时协作(RTC)服务器基于XMPP(Jabber)协议.Openfire安装和使用都非常简单,并利用Web进行管理.单台服务器可支持上万并发用户.所以常常被 ...

  6. 计算几何基础——矢量和叉积 && 叉积、线段相交判断、凸包（转载）

    转载自 http://blog.csdn.net/william001zs/article/details/6213485 矢量 如果一条线段的端点是有次序之分的话,那么这种线段就称为 有向线段,如果 ...

  7. PL/SQL Developer自动补全SQL技巧

    s = SELECT t.* FROM t w = WHERE b = BETWEEN AND l = LIKE '%%' o = ORDER BY insw = IN (SELECT a FROM ...

  8. Sass结合Modernizr的使用方法

    Modernizr在初始化的时候会首先找寻class=“no-js”的元素: <!DOCTYPE html> <html class="no-js"> &l ...

  9. UVa 12230 (期望) Crossing Rivers

    题意: 从A到B两地相距D,之间有n段河,每段河有一条小船,船的位置以及方向随机分布,速度大小不变.每段河之间是陆地,而且在陆地上行走的速度为1.求从A到B的时间期望. 分析: 我们只要分析每段河的期 ...

  10. bzoj1221: [HNOI2001] 软件开发

    挖坑.我的那种建图方式应该也是合理的.然后连样例都过不了.果断意识到应该为神奇建图法... #include<cstdio> #include<cstring> #includ ...