HTML+CSS网页设计实践教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.4 新增的交互元素

在HTML 5中，一个页面实际上就是一个应用程序，其表现最突出的就是与用户的交互操作。HTML 5为了增强页面与用户的交互，增加了几个提供交互体验的新元素，下面将介绍这些元素。

2.4.1 details元素

details元素提供了一种替代JavaScript的方法，它主要是提供了一个快捷、简化的方案，将页面上的部分区域进行展开或收缩。换句话说，details元素用来描述文档或文档某个部分的细节。

details元素经常和summary元素一起使用，summary作为details元素的子元素，用于定义默认显示的内容，即显示的标题。当用户单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果没有找到summary元素，浏览器将会提供自己默认的显示文本。

如下代码演示了details元素的简单使用：

    <details open>
        <summary>abc</summary>
    <p>这是details元素的练习</p>
    </details>

details元素中包含open属性，该属性定义details是否可见，它的值是一个布尔类型。默认情况下，open属性的值为false。如果设计人员希望一打开页面时就显示details元素的隐藏内容，那么则直接将open属性的值设置为true即可。

【练习14】

在本次练习中，声明两个details元素，将第一个details元素的open属性的值设置为true，然后通过ul和li元素指定列表。第二个details元素不指定open属性，通过ol和li元素指定列表。相关代码如下。

    <details open>
        <summary>实践教程系列图书</summary>
        <ul>
            <li><a href="#">《HTML 5+CSS 3实践教程》</a></li>
            <li><a href="#">《SQL Server 2010实践教程》</a></li>
            <li><a href="#">《ASP.NET实践教程》</a></li>
            <li><a href="#">《Oracle实践教程》</a></li>
            <li><a href="#">《JavaWeb实践教程》</a></li>
        </ul>
    </details>
    <details>
        <summary>我今年要完成的目标：</summary>
        <ol>
            <li><a href="#">带着爸爸妈妈去北京看看。</a></li>
            <li><a href="#">报一个培训班，培训自己的英语，提高自己的英语交流能力。</a></li>
            <li><a href="#">练习开车，争取把驾照考出来！</a></li>
        </ol>
    </details>

直接运行页面查看效果，单击summary元素声明的标题进行测试，初始效果如图2-14所示。

图2-14 details元素的使用

2.4.2 menu元素

menu元素用来定义菜单列表，适用于菜单、工具栏以及弹出菜单。该元素在HTML 2时就已经存在，在HTML 4时被废弃，但是，在HTML 5中又将该元素启用并且赋予了新的功能和含义。

menu元素经常和li列表元素结合使用，用来定义一个列表式的菜单。该元素包含几个常用的属性，如表2-2所示。

表2-2 menu元素的常用属性

例如，下面的代码演示了menu元素的简单使用。

    <menu>
        <li>这是菜单中的第一个项目。</li>
        <li>这是菜单中的第二个项目。<./li>
    </menu>

【练习15】

menu元素通常会和li元素一起使用，本次练习将这两个元素结合起来，向页面展示一个完整的集合，实现步骤如下。

（1）添加一个新的页面并且进行设计，menu元素声明列表，li元素声明每一项。部分代码如下。

    <menu>
        <li>
            <a target="_blank" href="#" title="谷歌浏览器"><img src="images/b_google.gif" width="184" height="50"></a> <a target="_blank" href="#" class="dl">下载</a><p>Google Chrome的特点是简洁、快速。Google Chrome支持多标签浏览，每个标签页面都在独立的"沙箱"内运行，在提高安全性的同时，一个标签页面的崩溃也不会导致其他标签页面被关闭。此外，Google Chrome基于更强大的JavaScript V8引擎，这是当前Web浏览器所无法实现的。<br></p>
        </li>
        <li>
            <a target="_blank" href="#" title="IE9"><img src="images/b_ie.gif" width="184" height="50"></a> <a target="_blank" href="#" class="dl">下载</a><p>IE9 beta是微软发布的首个ie9测试版本，IE9是微软迄今为止支持标准最规范的IE浏览器。同时，IE9还改进了IE浏览器性能，其中包括新的Chakra JavaScript引擎，以及面向图形、文本和媒体内容的HMLT5硬件加速功能。本站提供ie9中文版官方下载。<br></p>
        </li>
        <!--省略其他内容-->
    </menu>

上述代码使用menu和li元素定义菜单列表，menu元素定义菜单的框架，框架中的内容使用li元素来进行构造，以形成形状。

（2）为了美化列表的展示效果，常常需要借助CSS样式。为上述中的menu元素和li元素添加样式，部分样式代码如下。

    menu {
        padding-top:30px;
    }
    menu li {
        width:43%;                    //设置宽度
        padding-left:5%;            //设置距左边距
        float:left;                    //设置向左浮动
        line-height:20px;            //设置行高
        margin-bottom:1em;
        height:160px;                //设置高度
        overflow:hidden;            //超过的内容进行隐藏
        list-style:none;            //不显示列表的项目符号
    }
    menu li img {
        vertical-align:middle;
    }

（3）运行页面查看效果，如图2-15所示。

图2-15 menu元素运行效果

menu元素可以嵌套在别的菜单中，从而形成带有层次的菜单结构。另外，有许多Web应用程序的开发人员喜欢用menu元素代替nav元素进行导航。这里再一次强调，menu元素是用在一系列发生命令的菜单上的，是一种交互性的元素，确切来说是使用在Web应用程序中的。

2.4.3 command元素

command元素用来定义用户能够强调各种命令的按钮，如单选按钮、复选框按钮和图片按钮等。只有当command元素位于menu元素时该元素才是可见的，否则不会显示这个元素，但是可以用它来规定键盘快捷键。

例如，下面的代码演示了一个弹出警告框的菜单。

    <menu>
        <command onclick="alert('first command')"  label="Do 1st Command"/>
        <command onclick="alert('second command')" label="Do 2nd Command"/>
        <command onclick="alert('third command')"  label="Do 3rd Command"/>
    </menu>

command元素中包含多个常用的属性，如表2-3所示。

表2-3 command元素的常用属性

在表2-3中，可以将checked属性的值指定为true，将命令转换为复选框；也可以指定radiogroup属性将复选框转换为单选按钮，这个属性的值是互相排斥的按钮的组名。

【练习16】

除了简单的命令列表之外，还可以使用menu和command元素创建工具栏或弹出式上下文菜单，这时需要将type属性设置为toolbar或popup。本次练习显示一个与WordPress等Blog编辑器相似的工具栏，它使用icon属性链接到按钮图片。代码如下。

    <menu type="toolbar">
        <command onclick="insertTag(buttons, 0);"  label="strong" icon="bold. gif"/>
        <command onclick="insertTag(buttons, 1);"  label="em" icon="italic. gif"/>
        <command onclick="insertLink(buttons, 2);" label="link" icon="link. gif"/>
        <command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote. gif"/>
        <command onclick="insertTag(buttons, 4);"  label="del" icon="del. gif"/>
        <command onclick="insertTag(buttons, 5);"  label="ins" icon="insert. gif"/>
        <command onclick="insertImage(buttons, 6);"  label="img" icon="image. gif"/>
        <command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet. gif"/>
        <command onclick="insertTag(buttons, 8);"  label="ol" icon="number. gif"/>
        <command onclick="insertTag(buttons, 9);"  label="li" icon="item. gif"/>
        <command onclick="insertTag(buttons, 10);" label="code" icon="code. gif"/>
        <command onclick="insertTag(buttons, 11);" label="cite" icon="cite. gif"/>
        <command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr. gif"/>
        <command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym. gif"/>
    </menu>

2.4.4 datagrid元素

datagrid元素提供一个网格控件，可以用它来显示树、列表和表格，用户和脚本可以更新这些界面元素。

例如，下面通过datagrid元素包含一张成绩表，它的数据来自于一个table。代码如下。

    <datagrid multiple="true">
        <table>
            <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A </td></tr>
            <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A </td></tr>
            <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F </td></tr>
            <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A </td></tr>
            </table>
    </datagrid>

datagrid元素与常规表格的区别在于，用户可以选择行、列和单元格；把行、列和单元格折叠起来；编辑单元格；删除行、列和单元格；对网格排序；在客户端浏览器中直接进行其他数据操作；以及用JavaScript脚本代码监视更新等。

上一章目录下一章