HTML5 data-* 属性

HTML5 data-* 属性

jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。表 2 显示如何使用 data-* 属性创建 UI 元素。

表 2. 用于 UI 元素的 data-* 属性

元素	HTML5 data-* 属性
页眉、页脚工具栏	<div data-role="header"> <div data-role="footer">
主体内容	<div data-role="content">
按钮	<a href="index.html" data-role="button" data-icon="info">Button</a>
已编组按钮	<div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Hell Yeah</a> </div>
内联按钮	<div data-inline="true"> <a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a> </div>
表单元素（选择菜单）	<div data-role="fieldcontain"> <label for="select-options" class="select">Choose an option:</label> <select name="select-options" id="select-options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option2">Option 3</option> </select> </div>
基本列表视图	<ul data-role="listview"> <li><a href="index.html">One</a></li> <li><a href="index.html">Two</a></li> <li><a href="index.html">Three</a></li> </ul>
对话框	<a href="foo.html" data-rel="dialog">Open dialog</a> <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
过渡	<a href="index.html" data-transition="pop" data-back="true">

jQuery Mobile 文档包含受支持的 data-* 语法的完整列表。