手游打折最低平台

書名： HTML+CSS網頁設計實踐教程
作者名：田中雨
本章字數： 1918字
更新時間： 2021-03-19 20:43:02

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腳本代碼監視更新等。

官术网_书友最值得收藏!

HTML+CSS網頁設計實踐教程

2.4 新增的交互元素

2.4.1 details元素

2.4.2 menu元素

2.4.3 command元素

2.4.4 datagrid元素