手机前端之jquery Mobile学习——表单元素
2011-11-01 14:31 呦菜 阅读(2110) 评论(0) 编辑 收藏 举报jQuery Mobile会自动替换标准的HTML表单元素，例如文本框，复选框，列表框。以这种自定义的样式工作在触摸设备上的表单元素，易用性更强。
例如，复选框将会变得很大，易于点选。点击下拉列表时，将会弹出一组大按钮列表选项，提供给用户选择。
该框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加两个option选项，创建不错的”打开/关闭”开关，
另外一个不错的特点是组合单选框和组合复选框，可以利用fieldset元素添加属性data-role=”controlgroup”来创建一组单选按钮或复选框，jQuery Mobile自动格式化他们的格式。使它们看上去更fashion!
一般来说，开发者不需要关心表单的那些高级特性，开发者仅需要以正常的方式创建你的表单，jQuery Mobile框架会帮你完成剩余的工作。另外有一件事情需要开发人员来完成，即使用div或fieldset 属性data-role=”fieldcontain”包装每一个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可以使其更容易查找。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Ice Cream Order Form</h1>
</div>
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Your Name:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="controlgroup">
<legend>Which flavour(s) would you like?</legend>
<input type="checkbox" name="vanilla" id="vanilla" class="custom" />
<label for="vanilla">Vanilla</label>
<input type="checkbox" name="chocolate" id="chocolate" class="custom" />
<label for="chocolate">Chocolate</label>
<input type="checkbox" name="strawberry" id="strawberry" class="custom" />
<label for="strawberry">Strawberry</label>
</div>
<div data-role="fieldcontain">
<label for="quantity">Number of Cones:</label>
<input type="range" name="quantity" id="quantity" value="1" min="1" max="10" />
</div>
</div>
</div>
</body>
</html>
结果如图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- 只要将当前站点配置为移动应用程序，则对 phonegap.js 的该引用将允许代码提示。
要将该站点配置为移动应用程序，请转至“站点”->“移动应用程序”->“配置应用程序框架...”-->
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Ice Cream Order Form</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="sprinkles">Sprinkles:</label>
<select name="sprinkles" id="sprinkles" data-role="slider">
<option value="off">No</option>
<option value="on">Yes</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="store">Collect from Store:</label>
<select name="store" id="store">
<option value="mainStreet">Main Street</option>
<option value="libertyAvenue">Liberty Avenue</option>
<option value="circleSquare">Circle Square</option>
<option value="angelRoad">Angel Road</option>
</select>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>
</fieldset>
</div>
</div>
</div>
</body>
</html>
以上代码效果如图所示：
