<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Form Demo</title>
<linkrel="stylesheet"href="" />
<scriptsrc=""></script>
<scriptsrc=""></script>
</head>
<body>
<divdata-role="page"id="home">
<divdata-role="header">
<h1>Ice Cream Order Form</h1>
</div>
<divdata-role="content">
<formaction="#"method="get">
<divdata-role="fieldcontain">
<labelfor="name">Your Name:</label>
<inputtype="text"name="name"id="name"value="" />
</div>
<divdata-role="controlgroup">
<legend>Which flavour(s) would you like?</legend>
<inputtype="checkbox"name="vanilla"id="vanilla"class="custom" />
<labelfor="vanilla">Vanilla</label>
<inputtype="checkbox"name="chocolate"id="chocolate"class="custom" />
<labelfor="chocolate">Chocolate</label>
<inputtype="checkbox"name="strawberry"id="strawberry"class="custom" />
<labelfor="strawberry">Strawberry</label>
</div>
<divdata-role="fieldcontain">
<labelfor="quantity">Number of Cones:</label>
<inputtype="range"name="quantity"id="quantity"value="1"min="1"max="10" />
</div>
<divdata-role="fieldcontain">
<labelfor="sprinkles">Sprinkles:</label>
<selectname="sprinkles"id="sprinkles"data-role="slider">
<optionvalue="off">No</option>
<optionvalue="on">Yes</option>
</select>
</div>
<divdata-role="fieldcontain">
<labelfor="store">Collect from Store:</label>
<selectname="store"id="store">
<optionvalue="mainStreet">Main Street</option>
<optionvalue="libertyAvenue">Liberty Avenue</option>
<optionvalue="circleSquare">Circle Square</option>
<optionvalue="angelRoad">Angel Road</option>
</select>
</div>
<divclass="ui-body ui-body-b">
<fieldsetclass="ui-grid-a">
<divclass="ui-block-a"><buttontype="submit"data-theme="d">Cancel</button></div>
<divclass="ui-block-b"><buttontype="submit"data-theme="a">Order Ice Cream</button></div>
</fieldset>
</div>
</div>
</div>
</body>
</html>
列表视图
列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。
下面的一些情景将会用到创建列表视图
简单的文件列表项
简单的文件列表，会有一个好看的盒环绕着每一个列表项
链接列表，框架会自动为每一个链接加一个箭头”>”，显示在链接按钮的右侧
嵌套列表，如果你在一个li中嵌套另一个ul，jQuery Mobile会为这个嵌套列表自动建立一个”page”，并为它的父li自动加一个链接，这样很容易实现树状菜单选项，设置功能等等。
分隔线的按钮列表，在一个li中存放2个链接，你可以建立一个还垂直分隔条，用户可点击左侧或右侧的列表选项，展现不同的内容
记数气泡 如果你在列表选项中添加class=”ui-li-count”，框架会在其中生成一个”小泡泡”图标显现于列表选项的右侧，并在”小泡泡”中显示一些内容。类似在收信箱中看到已经收到的信息条数
查找过滤 在ul或ol中添加data-filter=”true”属性。则这个列表项就具备的查询的功能。”Filter result…”文本框将会显示在列表项的上面，允许用户根据条件来将一个大的列表项变小（过滤显示）
列表分隔 将列表项分割，可以在任意列表项上添加属性data-role=”list-divider
相关文章
精彩导读
热门资讯
关注我们
