jQueryMobile的(十六)单选框、复选框

最新推荐文章于 2019-06-16 22:18:56 发布

游可

最新推荐文章于 2019-06-16 22:18:56 发布

阅读量5.8k

点赞数

分类专栏： jQuery Mobile 文章标签： jquery mobile

本文链接：https://blog.csdn.net/bao990423420/article/details/14056223

版权

jQuery Mobile 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

radio（单选按钮）

单选按钮组和复选按钮组都是用标准的 input/label 标记书写的，但是都被样式化得更容易触摸式点击。你所看见的控件，其实是覆盖在 input 上的 label 元素，所以如果图片没有正确加载，你仍然可以正常使用控件。

<!DOCTYPE html> 
<html> 
	<head> 
	<meta charset="utf-8">
	<title>Forms</title> 
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
	<style>
		.ui-controlgroup-horizontal .ui-radio label {
			/* Reduce font size to prevent horizontal buttons from wrapping */
		    font-size: 13px !important;
		}
	</style>
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 

<div data-role="page">
	<div data-role="header">
		<h1>Radio Buttons</h1>
	</div>

	<div data-role="content">
	  <form id="test" id="test" action="#" method="post">	

		<fieldset data-role="controlgroup">
    		<legend>Map view:</legend>
  			<input type="radio" name="map" id="map1" value="Map" checked="checked" />
         	<label for="map1" data-theme="b">Map</label>

         	<input type="radio" name="map" id="map2" value="Satellite"  />
         	<label for="map2" data-theme="b">Satellite</label>

         	<input type="radio" name="map" id="map3" value="Hybrid"  />
         	<label for="map3" data-theme="b">Hybrid</label>
	    </fieldset>

	    <fieldset data-role="controlgroup" data-type="horizontal">
    		<legend>Map view:</legend>
  			<input type="radio" name="map" id="map1" value="Map" checked="checked" />
         	<label for="map1">Map</label>

         	<input type="radio" name="map" id="map2" value="Satellite" />
         	<label for="map2">Satellite</label>

         	<input type="radio" name="map" id="map3" value="Hybrid"  />
         	<label for="map3">Hybrid</label>
	    </fieldset>
		
	  </form>			 			 		 			 
	</div>
</div>

</body>
</html>

checkbox（复选框）

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

<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>

游可

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQueryMobile的(十六)单选框、复选框

radio（单选按钮）单选按钮组和复选按钮组都是用标准的 input/label 标记书写的，但是都被样式化得更容易触摸式点击。你所看见的控件，其实是覆盖在 input 上的 label 元素，所以如果图片没有正确加载，你仍然可以正常使用控件。 Forms .ui-controlgroup-horizontal .ui-radio l
复制链接

扫一扫

专栏目录