<fieldset data-role="controlgroup"> <legend>Choose a pet:</legend> <input type="radio" value="choice-1" checked="checked" /> <label for="radio-choice-1">Cat</label> <input type="radio" value="choice-2" /> <label for="radio-choice-2">Dog</label> <input type="radio" value="choice-3" /> <label for="radio-choice-3">Hamster</label> </fieldset>
图 11. 单选按钮
<label for="select-choice-0">Shipping method:</label> <select> <option value="standard">Standard: 7 day</option> <option value="rush">Rush: 3 days</option> <option value="express">Express: next day</option> <option value="overnight">Overnight</option> </select>
图 12. 选择（表单）<label for="slider-0">Input slider:</label> <input type="range" value="60" min="0" max="100" />
图 13. 滑块<label for="basic">Text Input:</label> <input type="text" value="" />
图 14. 文本输入<label for="textarea-a">Textarea:</label> <textarea> Basic textarea. </textarea>
图 15. 文本区域
<div>Block A</div> <div>Block B</div> <div>Block C</div> </div>
注意：
图 16. 网格data-role 属性是用于定义各种小部件。不是所有 UI 小部件都由 data-role 属性决定（不过选择、滑块和文本输入均是）。参阅 data- 属性参考资料以获取关于各种 data-* 属性的详细信息（参阅 ）。
正如上面提到的，jQuery Mobile UI 框架包括构建完整的移动 Web 应用程序和网站（包括页面、对话框、工具栏、各种类型的视图列表、各种表单元素、按钮和其他内容）的所有 UI 组件。我们已经介绍了用于定义各种 jQuery Mobile UI 小部件的 HTML5 data-* 属性。本小节其余部分将讨论最常见的 jQuery Mobile UI 小部件。
对话框模态对话框是一个重要的页面类型，对于警报或向用户发送消息非常有用。任何页面都可以过渡成一个模态对话框，其方法为通过添加 data-rel="dialog" 属性到页面锚点链接，如下所示。
<a href="tc.html" data-rel="dialog" data-transition="pop">Terms of Use</a>
您可以将过渡和主题引用到该对话框。jQuery Mobile Dialog 页面拥有更多信息可供参考（参阅 ）。
列表视图列表视图是移动应用程序最重的 UI 元素之一。jQuery Mobile 提供一组丰富的列表视图元素，包括基础、嵌套、分割按钮、编号、计数泡泡和图标列表。我们来看看一些列表视图的代码和渲染。
<ul data-role="listview"> <li><a href="index.html">Acura</a></li> </ul>
图 17. 基础链列表<ul data-role="listview" data-inset="true"> <li> <a href="index.html">Get Friends</a> </li> <li> <a href="index.html">Post to Wall</a> </li> <li> <a href="index.html">Send Message</a> </li> </ul>
图 18. 嵌套列表<ol data-role="listview"> <li><a href="index.html">The Godfather</a></li> </ol>
图 19. 有序列表<ul data-role="listview" data-split-icon="gear" data-split-theme="d"> <li> <a href="index.html"> <img src="images/album-ws.jpg" /> <h3>Elephant</h3> <p>The White Stripes</p> </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a> </li> </ul>
图 20. 分割按钮列表jQuery Mobile 将支持所有这些列表视图作为插图风格列表（带圆角的列表），其方法为通过指定 data-insert 属性，如 所示。
图 21. 插图风格列表
显示插图风格列表代码
清单 23. 插图风格列表
相关文章
精彩导读
热门资讯
关注我们
