checkbox(复选框)

复选框用来提供一组选项,可以选中不止一个选项。传统的桌面程序的复选框按钮组没有对触摸输入的方式的优化,所以在Jquery Mobile中,label也被样式化为复选按钮,使按钮更长更容易被点击选中。并添加了自定义的一组图标来增强视觉反馈。

单选按钮组和复选按钮组都是用标准的 input/label 标记书写的,但是都被样式化得更容易触摸式点击。你所看见的控件,其实是覆盖在 input 上的 label 元素, 所以如果图片没有正确加载,你仍然可以正常使用控件。在大多数浏览器里,点击label会自动触发在input上的点击,但是我们不得不为部分不支持该特性的移动浏览器人工去触发该点击。在桌面程序里,键盘和屏幕阅读器也可以使用这些控件。

要创建一组复选框,为 input 添加 type="checkbox"属性和相应的label即可。注意:要把label的for属性设为input的id值,使他们能够在语义上相关联。

<label><input type="checkbox" name="checkbox-0" /> I agree </label> 
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> 
<label for="checkbox-1"> I agree </label>

上面的代码会产生两个基本的复选框。默认的样式将设置元素的父容器的宽度为100%。

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style> 
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
		height: 115px;
	}
	.ui-mobile, .ui-mobile .ui-page {
		min-height: 115px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
    </style> 
</head> 
<body> 
<div data-role="page" style="max-height:120px; min-height:120px;">
	<div data-role="content" > 
    	<form> 
    		<label><input type="checkbox" name="checkbox-0" /> I agree </label> 
		<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> 
		<label for="checkbox-1" > I agree </label> 
    	</form> 
	</div> 
</div> 
</body> 
</html> 

checkbox 复选框
checkbox 复选框

迷你版 data-mini="true"

一个更紧凑的版本,在工具栏和紧空间是有用的,添加 data-mini="true" 属性,创建迷你版。

<input type="checkbox" name="checkbox-mini" id="checkbox-mini-1" class="custom" data-mini="true" />
<label for="checkbox-mini-1">I agree</label>

这样创建的复选按钮比标准的复选按钮矮一些,字号也小一些。
checkbox 复选框

区域容器与图例 data-role="controlgroup"

因为复选按钮使用label元素放置checkbox后,用来显示其文本,我们推荐把复选按钮组用fieldset容器包裹,并给fieldset容器内增加一个legend 元素,用来表示该问题的标题。并且给fieldset添加data-role="controlgroup"属性。并且按钮组放在一个 div 容器中,并给此div容器添加 data-role="fieldcontain" 属性,使按钮组在一个长形式中。。

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>
</div>

checkbox 复选框

垂直组合的复选框

通常情况下,复选按钮组会置于标题下面。Jquery Mobile会自动移除按钮间的margin,给按钮组上下添加圆角,使得单选按钮组看起来为一个整体。

		<div  data-role="fieldcontain">
        	<form>
		 		<fieldset data-role="controlgroup"> 
					<legend>Choose as many snacks as you'd like:</legend>
					<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
					<label for="checkbox-1a">Cheetos</label>
    	            
					<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
					<label for="checkbox-2a">Doritos</label>
			
					<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
					<label for="checkbox-3a">Fritos</label>
	
					<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
					<label for="checkbox-4a">Sun Chips</label>
			    </fieldset>
			</form>
		</div>

checkbox 复选框

水平组合的复选按钮 data-type="horizontal"

做一个横向按钮设置,给fieldset添加 data-type="horizontal" 属性即可。

    	<div data-role="fieldcontain">
        	<form>
			    <fieldset data-role="controlgroup" data-type="horizontal"> 
			    	<legend>Font styling:</legend>
			    	<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
					<label for="checkbox-6">b</label>
	
					<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
					<label for="checkbox-7"><em>i</em></label>
					<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
					<label for="checkbox-8">u</label>    
			    </fieldset>
			</form>
        </div>

checkbox 复选框