radio(单选按钮)

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

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

垂直单选按钮组

创建一组单选按钮,使用input,并给它添加 type="radio" 属性和对应的 label 。给label设置匹配输入的 ID ,所以它们在语义上相关的属性。把单选按钮组用fieldset容器包裹,给fieldset添加 data-role="controlgroup" 属性。并给fieldset容器内增加一个legend 元素,用来表示该问题的标题。

通常情况下,复选按钮组会置于标题下面,垂直分组显示。Jquery Mobile会自动移除按钮间的margin,给按钮组中顶部和底部的按钮添加圆角,使得单选按钮组看起来为一个整体。

<fieldset data-role="controlgroup">
  <legend>Choose a pet:</legend>
  <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
  <label for="radio-choice-1">Cat</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
  <label for="radio-choice-2">Dog</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
  <label for="radio-choice-3">Hamster</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
  <label for="radio-choice-4">Lizard</label>
</fieldset>

区域容器 data-role="fieldcontain"

单选按钮组放在一个 div 容器中,并给此div容器添加 data-role="fieldcontain" 属性,使按钮组在一个长形式中。

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
  <legend>Choose a pet:</legend>
  <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
  <label for="radio-choice-1">Cat</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
  <label for="radio-choice-2">Dog</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
  <label for="radio-choice-3">Hamster</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
  <label for="radio-choice-4">Lizard</label>
</fieldset>
</div>

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

单选按钮也可用于分组按钮设置,只有一个按钮可以选择一次,如视图切换控制。做一个横向的单选按钮组。给 fieldset 添加 data-type="horizontal" 属性。

按钮组坐在一线并排。单选按钮的图标是隐藏的,只有左、右边缘是圆形组。

<!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: 85px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 85px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 

<body> 
<div data-role="page" style="max-height:90px; min-height:90px;">
	<div data-role="content" > 
		<div data-role="fieldcontain">
        <form>
	    <fieldset data-role="controlgroup" data-type="horizontal">
	     	<legend>Layout view:</legend>
	         	<input type="radio" name="radio-view" id="radio-view-a" value="list"  />
	         	<label for="radio-view-a">List</label>
	         	<input type="radio" name="radio-view" id="radio-view-b" value="grid"  />
	         	<label for="radio-view-b">Grid</label>
	         	<input type="radio" name="radio-view" id="radio-view-c" value="gallery"  />
	         	<label for="radio-view-c">Gallery</label>
	    </fieldset>
        </form>
	</div>

	</div>
</div>
</body>
</html>


选中前


选中后

迷你版 data-mini="true"

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

<fieldset data-role="controlgroup"  data-mini="true" >
  <legend>Choose a pet:</legend>
  <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
  <label for="radio-choice-1">Cat</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
  <label for="radio-choice-2">Dog</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
  <label for="radio-choice-3">Hamster</label>
 
  <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
  <label for="radio-choice-4">Lizard</label>
</fieldset>

  

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>checkboxradio demo</title>
<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>
<!-- The script below can be omitted -->
<script src="/resources/turnOffPushState.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content">
<form>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
</form>
</div>
</div>
<script></script>
</body>
</html>