jquery mobile 移动web(4)

下拉菜单: 　　设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain.

	　　<div data-role="controlgroup">
	    　　　　<label for="select" class="select">请选择你的兴趣</label>
	    　　　　<select name="select" id="select">
	        　　　　　　<option>音乐</option>
	        　　　　　　<option>电影</option>
	        　　　　　　<option>体育</option>
	        　　　　　　<option>旅游</option>
	    　　　　</select>
	　　</div>

分组的选择菜单 　　要在select 元素制定optgroup。

	　　　　<div data-role="controlgroup">
	    　　　　　　<label for="select">请选择你的兴趣：</label>
	    　　　　　　<select name="select" id="select" data-native-menu="true">
	        　　　　　　　　<optgroup label="娱乐类"/>
	        　　　　　　　　<option>音乐</option>
	        　　　　　　　　<option>电影</option>
	        　　　　　　　　<optgroup label="文体累"/>
	        　　　　　　　　<option>体育</option>
	        　　　　　　　　<option>旅游</option>
	    　　　　　　</select>
	　　　　</div>

禁用指定Option 数据项的选择菜单

	　　　<div data-role="controlgroup">
	    　　　　　　<label for="select">请选择你的兴趣：</label>
	    　　　　　　<select name="select" id="select" data-native-menu="true">
	        　　　　　　　　<optgroup label="娱乐类"/>
	        　　　　　　　　<option disabled="">音乐</option>
	        　　　　　　　　<option>电影</option>
	        　　　　　　　　<optgroup label="文体累"/>
	        　　　　　　　　<option>体育</option>
	        　　　　　　　　<option>旅游</option>
	    　　　　　　</select>
	　　</div>

普通连接列表

	　　　<div data-role="page">
	    　　　　　　<header data-role="header">
	        　　　　　　　　<h1>列表例</h1>
	    　　　　　　</header>
	    　　　　　　<div data-role="content">
	        　　　　　　　　<ul data-role="listview" data-theme="g">
	            　　　　　　　　　　<li><a href="#">List 1</a></li>
	            　　　　　　　　　　<li><a href="#">List 2</a></li>
	            　　　　　　　　　　<li><a href="#">List 3</a></li>
	            　　　　　　　　　　<li><a href="#">List 4</a></li>
	        　　　　　　　　</ul>
	    　　　　　　</div>
	　　</div>

多层次嵌套列表。

	　　<div data-role="page">
	    　　　　<header data-role="header">
	        　　　　　　<h1>列表例</h1>
	    　　　　</header>
	    　　　　<div data-role="content">
	        　　　　　　<ul data-role="listview" data-theme="g">
	            　　　　　　　　<li>
	                                　<a href="#" data-add-back-btn="true">List 1</a>
	                　　　　　　　　　　<p >这是第一层</p>
	                　　　　　　　　　　<ul>
	                    　　　　　　　　　　　　<li>
	                        　　　　　　　　　　　　　　<a>subList 1 of 1</a>
	                        　　　　　　　　　　　　　　<a>subList 1 of 2</a>
	                        　　　　　　　　　　　　　　<a>subList 1 of 3</a>
	                    　　　　　　　　　　　　</li>
	                　　　　　　　　　　</ul>
	            　　　　　　　　</li>
	            　　　　　　　　<li>
	　                   							<a href="#" data-add-back-btn="true">List 2</a>
	                　　　　　　　　　　<p >这是第二层</p>
	                　　　　　　　　　　<ul>
	                    　　　　　　　　　　　　<li>
	                        　　　　　　　　　　　　　　<a>subList 2 of 1</a>
	                        　　　　　　　　　　　　　　<a>subList 2 of 2</a>
	                        　　　　　　　　　　　　　　<a>subList 2 of 3</a>
	                    　　　　　　　　　　　　</li>
	                　　　　　　　　　　</ul>
	            　　　　　　　　</li>
	            　　　　　　<li>
																 <a href="#" data-add-back-btn="true">List 3</a>
	                　　　　　　　　<p >这是第三层</p>
	                　　　　　　　　<ul>
	                    　　　　　　　　　　<li>
	                        　　　　　　　　　　　　<a>subList 3 of 1</a>
	                        　　　　　　　　　　　　<a>subList 3 of 2</a>
	                        　　　　　　　　　　　　<a>subList 3 of 3</a>
	                    　　　　　　　　　　</li>
	                　　　　　　　　</ul>
	            　　　　</li>
	        　　</ul>
	    　　</div>
	　　</div>