jquerymobile-15 radio buttons和checkboxes

明天就开始上班了,回家的这些天家里没有网,另外在家也没有心思写博客,所以就没写,回来继续。


在平时的开发中难免会用到单选和复选按钮,所以简单的介绍一下这两个,首先看一段代码:

<!DOCTYPE html>
<html>
<head>
<title>Form Example 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

<body>

<div data-role="page">

	<div data-role="header">
		<h1>Form Demo</h1>
	</div>
	
	<div data-role="content">
		
		<form action="echo.cfm" method="post">
			
		<div data-role="fieldcontain">
			<fieldset data-role="controlgroup">
				<legend>性别:</legend>

				<input type="radio" name="sex" id="nan" value="男">
				<label for="nan">男</label> 

				<input type="radio" name="sex" id="nv" value="女">
				<label for="nv">女</label> 

			</fieldset>
		</div>

		<div data-role="fieldcontain">
			<fieldset data-role="controlgroup">
				<legend>喜欢的颜色:</legend>

				<input type="checkbox" name="favoritecolor" id="favoritecolor1" value="Green">
				<label for="favoritecolor1">绿色</label> 

				<input type="checkbox" name="favoritecolor" id="favoritecolor2" value="Red">
				<label for="favoritecolor2">红色</label> 

				<input type="checkbox" name="favoritecolor" id="favoritecolor3" value="Yellow">
				<label for="favoritecolor3">黄色</label> 

			</fieldset>
		</div>

		    <input type="submit" name="submit" value="Send"  />
		</div>	
		
		</form>

	</div>

</div>

</body>
</html>

运行的效果如下:

jquerymobile-15 radio buttons和checkboxes_第1张图片


解释一下代码中的一些东西:data-role="fieldcontain"是为了将内容进行分块,主要的功能就是在每个区域后面加上一条横线,便于区分区域。例如途中“女”字下面的那条线。data-role="controlgroup"是为了使其所包围的内容更加的紧凑更像一个整体。读者可以将代码中的对应的东西删去看一下效果。

最后将代码中的<fieldset data-role="controlgroup">修改为<fieldset data-role="controlgroup" data-type="horizontal">,可以实现按钮的横向排列。


你可能感兴趣的:(jquerymobile-15 radio buttons和checkboxes)