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