jquery mobile 移动web(3)

可折叠功能块。 　　div 元素的 data-role 属性设置为 collapsible 　　代码如下：

			　　　　<div data-role="collapsible">
			    　　　　　　<h3>可折叠区域标题</h3>
			    　　　　　　<p>这是一个折叠区域的内容，这是一个折叠区域的内容，这是一个折叠区域的内容，这是一个折叠区域的内容，这是一个折叠区域的内容，
			        　　　　　　　　这是一个折叠区域的内容，这是一个折叠区域的内容，这是一个折叠区域的内容，这是一个折叠区域的内容，
			        　　　　　　　　这是一个折叠区域的内容，这是一个折叠区域的内容，这是一个折叠区域的内容，</p>
			　　　　</div>

创建手风琴效果。 　　在最外层的div元素定义 data-role 属性值为 collapsible-set

　　Form表单。

	　　　　1普通文本框。
  	　　　　　　<label for="name">name:</label>
		　　　　　　<input type="text" name="name" id="name" value="">
  　　　　2.密码文本框
		　　　　　　<label for="password">passwored</label>
		　　　　　　<input type="password" name="password" id="password" value="">
	　　　　3.文本类型文
		　　　　　　<label for="content">content:</label>
		　　　　　　<textarea cols="40" rows="4" name="content" id="content"></textarea>
	　　　　4.Number 类型
		　　　　　　<label for="number">password</label>
		　　　　　　<input type="number" name="number" id="number" value="">
	　　　　5.tel 类型
		　　　　　　<label for="tel">tel</label>
		　　　　　　<input type="tel" name="telr" id="tel" value="">
	　　　　6.email 类型
		　　　　　　<label for="email">email</label>
		　　　　　　<input type="email" name="email" id="email" value="">
	　　　　7.URL类型
		　　　　　　<label for="url">url</label>
		　　　　　　<input type="url" name="url" id="url" value="">
	　　　　8.search 类型
		　　　　　　<label for="search">search</label>
		　　　　　　<input type="search" name="search" id="search" value="">
	　　　　9.Slider 类型
		 　　　　　　<label for="slider">slider</label>
    		　　　　　　<input type="range" name="range" id="range" value="2" min="0" max="10">
    	　 10.Toggle
    		　　　　　　<div data-role="fieldcontain">
		    　　　　　　　　<label for="slider">toggle switches</label>
		    　　　　　　　　<select name="slider" id="slider" data-role="slider">
		       　　　　　　　　　　<option value="off">关闭</option>
		        　　　　　　　　　　<option value="on">开启</option>
		    　　　　　　　　</select>
		　　　　　　</div>

单选按钮 　　把一组单选按钮放在 fieldset 元素内，同时定义legend 元素表示单选按钮组的名称。 设置fieldset 元素data-role 元素属性为 controlgroup 　　表示该元素是一组单选按钮。 　　代码如下：

		　　<fieldset data-role="controlgroup">
		    　　　　<legend>请选择你的年龄范围：</legend>
		    　　　　<input type="radio" name="radio-1" id="radio-1" value="any" checked="checked">
		    　　　　<label for="radio-1">不限</label>
		    　　　　<input type="radio" name="radio-1" id="radio-2" value="16-22">
		    　　　　<label for="radio-2">16-22</label>
		    　　　　<input type="radio" name="radio-1" id="radio-3" value="22-30">
		    　　　　<label for="radio-3">22-30</label>
		　　</fieldset>

复选框按钮 　　input元素的属性是checkbox 而不是radio.

	　　<fieldset data-role="controlgroup">
	    　　　　<legend>点击全选：</legend>
	    　　　　<input type="checkbox" name="checkbox-1" id="checkbox-1"class="custom">
	    　　　　<label for="checkbox-1">全选</label>
	　　</fieldset>