這篇文章給大家分享的是有關(guān)HTML5如何實(shí)現(xiàn)交互的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

按需定制開發(fā)可以根據(jù)自己的需求進(jìn)行定制，成都網(wǎng)站制作、成都網(wǎng)站建設(shè)構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站制作、成都網(wǎng)站建設(shè)的運(yùn)用實(shí)際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實(shí)際意義

HTML 5 也被稱為 Web Applications 1.0。為了實(shí)現(xiàn)這個(gè)目標(biāo)，增加了幾個(gè)為 Web 頁面提供交互體驗(yàn)的新元素：
details
datagrid
menu
command
這些元素都可以根據(jù)用戶的操作和選擇改變顯示的內(nèi)容，而不需要從服務(wù)器裝載新頁面。
details
details 元素表示在默認(rèn)情況下可能不顯示的詳細(xì)信息。可選的 legend 元素可以提供詳細(xì)信息的摘要。
details 元素的用途之一是提供腳注和尾注。例如：
The bill of a Craveri's Murrelet is about 10% thinner
than the bill of a Xantus's Murrelet.
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) p. 247
</p>
</details>
沒有指定具體的顯示方式。瀏覽器可以選用腳注、尾注和工具提示等方式。
每個(gè) details 元素可以有一個(gè) open 屬性。如果設(shè)置了這個(gè)屬性，那么詳細(xì)信息在最初就顯示出來。如果沒有設(shè)置這個(gè)屬性，那么會(huì)隱藏它們，直到用戶要求顯示它們。無論是哪種情況，用戶都可以通過單擊一個(gè)圖標(biāo)或其他控件來顯示或隱藏詳細(xì)信息。
datagrid
datagrid 元素提供一個(gè)網(wǎng)格控件?？梢杂盟@示樹、列表和表格，用戶和腳本可以更新這些界面元素。與之相反，傳統(tǒng)的表格主要用來顯示靜態(tài)數(shù)據(jù)。
datagrid 從它的內(nèi)容（一個(gè) table、select 或其他 HTML 元素）獲得初始數(shù)據(jù)。例如，代碼 9 中的 datagrid 包含一張成績(jī)表。在這個(gè)示例中，datagrid 的數(shù)據(jù)來自一個(gè) table。更簡(jiǎn)單的一維 datagrid 可以從 select 元素獲得數(shù)據(jù)。如果使用其他 HTML 元素，那么每個(gè)子元素成為網(wǎng)格中的一行。
<datagrid>
<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>
這個(gè)元素與常規(guī)表格的區(qū)別在于，用戶可以選擇行、列和單元格；把行、列和單元格折疊起來；編輯單元格；刪除行、列和單元格；對(duì)網(wǎng)格排序；以及在客戶機(jī)瀏覽器中直接進(jìn)行其他數(shù)據(jù)操作?？梢杂?JavaScript 代碼監(jiān)視更新。Document Object Model（DOM）中增加了 HTMLDataGridElement 接口以支持這個(gè)元素（代碼 10　HTMLDataGridElement）。
interface HTMLDataGridElement : HTMLElement {
attribute DataGridDataProvider data;
readonly attribute DataGridSelection selection;
attribute boolean multiple;
attribute boolean disabled;
void updateEverything();
void updateRowsChanged(in RowSpecification row, in unsigned long count);
void updateRowsInserted(in RowSpecification row, in unsigned long count);
void updateRowsRemoved(in RowSpecification row, in unsigned long count);
void updateRowChanged(in RowSpecification row);
void updateColumnChanged(in unsigned long column);
void updateCellChanged(in RowSpecification row, in unsigned long column);
};
還可以使用 DOM 在網(wǎng)格中動(dòng)態(tài)地裝載數(shù)據(jù)。也就是說，datagrid 可以不包含那些提供初始數(shù)據(jù)的子元素?？梢杂靡粋€(gè) DataGridDataProvider 對(duì)象設(shè)置它（代碼 11　DataGridDataProvider）。這樣就可以從數(shù)據(jù)庫、XmlHttpRequest 或者 JavaScript 代碼能夠訪問的任何資源裝載數(shù)據(jù)。
interface DataGridDataProvider {
void initialize(in HTMLDataGridElement datagrid);
unsigned long getRowCount(in RowSpecification row);
unsigned long getChildAtPosition(in RowSpecification parentRow,
in unsigned long position);
unsigned long getColumnCount();
DOMString getCaptionText(in unsigned long column);
void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
DOMString getRowImage(in RowSpecification row);
HTMLMenuElement getRowMenu(in RowSpecification row);
void getRowClasses(in RowSpecification row, in DOMTokenList classes);
DOMString getCellData(in RowSpecification row, in unsigned long column);
void getCellClasses(in RowSpecification row, in unsigned long column,
in DOMTokenList classes);
void toggleColumnSortState(in unsigned long column);
void setCellCheckedState(in RowSpecification row, in unsigned long column,
in long state);
void cycleCell(in RowSpecification row, in unsigned long column);
void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};
menu 和 command
menu 元素實(shí)際上在 HTML 2 中就出現(xiàn)了。在 HTML 4 中廢棄了它，但是 HTML 5 又恢復(fù)了它并指定了新的意義。在 HTML 5 中，menu 包含 command 元素，每個(gè) command 元素引發(fā)一個(gè)操作。例如，代碼 12 HTML 5 菜單　是一個(gè)彈出警告框的菜單。
<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>
還可以用 checked="checked" 屬性將命令轉(zhuǎn)換為復(fù)選框。通過指定 radiogroup 屬性，可以將復(fù)選框轉(zhuǎn)換為單選按鈕，這個(gè)屬性的值是互相排斥的按鈕的組名。
除了簡(jiǎn)單的命令列表之外，還可以使用 menu 元素創(chuàng)建工具欄或彈出式上下文菜單，這需要將 type 屬性設(shè)置為 toolbar 或 popup。例如，代碼　13. HTML 5 工具欄　顯示一個(gè)與 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);" 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>
label 屬性提供菜單的標(biāo)題。例如，代碼14. HTML 5 Edit 菜單　顯示一個(gè) Edit 菜單。
<menu type="popup" label="edit">
<command onclick="undo()" label="Undo"/>
<command onclick="redo()" label="Redo"/>
<command onclick="cut()" label="Cut"/>
<command onclick="copy()" label="Copy"/>
<command onclick="paste()" label="Paste"/>
<command onclick="delete()" label="Clear"/>
</menu>
菜單可以嵌套在其他菜單中，形成層次化的菜單結(jié)構(gòu)。

感謝各位的閱讀！關(guān)于“HTML5如何實(shí)現(xiàn)交互”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁題目：HTML5如何實(shí)現(xiàn)交互
網(wǎng)頁URL：http://jinyejixie.com/article48/iiechp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、品牌網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、建站公司、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)