HTML 5 中的新元素 - 科技先生

清单 11. DataGridDataProvider

以下是代码片段：[www.xlnv.net]
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 元素实际上在 HTML 2 中就出现了。在 HTML 4 中废弃了它，但是 HTML 5 又恢复了它并指定了新的意义。在 HTML 5 中，menu 包含 command 元素，每个 command 元素引发一个操作。例如，清单 12 是一个弹出警告框的菜单。

清单 12. HTML 5 菜单

以下是代码片段：[www.xlnv.net]
<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" 属性将命令转换为复选框。通过指定 radiogroup 属性，可以将复选框转换为单选按钮，这个属性的值是互相排斥的按钮的组名。

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

清单 13. HTML 5 工具栏

以下是代码片段：[www.xlnv.net]
<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>

9/10 首页上一页 7 8 9 10 下一页尾页