原文：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. ARM CPU与Intel x86 CPU性能比较

    Qualcomm ARM CPU与Intel x86 CPU性能比较 随着移动互联网时代的到来,Qualcomm(高通).Texas Instruments(德州仪器)等基于ARM架构的CPU受到越来 ...

  2. Quartz的misfire特性

    Quartz的misfire特性 只有一个线程.多个job 第一个job产生misfire(executeTime>Interval) 且是repeatForever 那么只会运行第一个job, ...

  3. Android列表视图(List View)

    Android列表视图(ListView) ListView是一个显示滚动项列表的示视图组(viewgroup),通过使用适配器(Adapter)把这些列表项自动插入到列表中.适配器比如从一个数组或是 ...

  4. 1002: A+B for Input-Output Practice (II)

    问题描述: http://acm.wust.edu.cn/problem.php?id=1002&soj=0 代码实现: import java.util.Scanner; public cl ...

  5. HDU 1754 I Hate It （线段树 单点更新）

    题目链接 中文题意,与上题类似. #include <iostream> #include <cstdio> #include <cstring> #include ...

  6. java 基础学习

    a+b: import java.util.Scanner; public class Main { public static void main(String args[]){ Scanner c ...

  7. Python3 学习第四弹：编码问题（转载）

    关于python的编码问题一直以来不得解,终于在今天从这篇博文中明白了. 原文地址: http://nedbatchelder.com/text/unipain.html 译文地址:http://py ...

  8. hdu 4937 Lucky Number

    虽然算法清晰的不能再清晰,但是实现总是边角料错这错那. 题目大意: 给出n,找出一些进制,使得n在该进制下仅为3,4,5,6表示 解题思路: 首先,4-10000进制直接枚举计算出每一位 此外,最多只 ...

  9. bzoj4046

    分组赛的题……madan原题,考试想不出来真是SB得不行 首先,从大往小加边,每次加边如果成环必然弹出环上最大边 考虑询问[x,y],如果边权在[x,y]的边弹出了小于等于y的边j,说明j不在最小生成 ...

  10. bzoj2395

    分组赛时学到的最小乘积生成树模型,感觉这个思路非常神,可以说是数形结合的经典问题 由于生成树有两个权值,我们把每个生成树的权值表示成点坐标(sa,sb) 显然我们知道,乘积最小,那么点必然落在下凸壳上 ...