HTML5与移动Web：jQuery Mobile主题与组件

一，官方主题

jQuery Mobile 1.4.5版本中提供了两套主题样式，分别用字母a和b进行引用；

 

<div id="page1" data-role="page" data-theme="a"></div>
<div id="page2" data-role="page" data-theme="b"></div>

二，自定义主题

三，按钮组件

使用<a> 元素创建按钮

<a href="#" data-role="button" data-inline="true" class="ui-btn-active">确定</a>

使用 <button> 元素创建按钮

<input type="button" data-icon="delete" value="取消">

四，列表组件

<ul data-role="listview">
	<li><a href="#">星期五音乐餐吧</a></li>
	<li><a href="#">恋爱转角情人西餐厅</a></li>
	<li><a href="#">成都印象</a></li>
	<li><a href="#">美食家私房菜馆</a></li>
</ul>

列表分割-手动

指定列表分割，给列表项<li>元素添加 data-role=“list-divider” 属性即可。

<ul>
    <li data-role="list-divider" class="list01">中餐厅</li>
	<li><a href="#"><img src="images/174404.jpg" />
	<h2>外婆家私房菜馆</h2>
	<p>主营精致的创新私房菜为主打，特别适合年青人</p>
	</a>
    </li>
    <li><a href="#"><img src="images/174405.jpg" />
	<h2>成都印象</h2>
	<p>主营川菜，一起领略川菜的麻、辣、鲜、香</p>
	</a>
    </li>
</ul>

 列表分割-自动

data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。

<ul data-role="listview" data-autodividers="true" data-inset="true">
	<li><a href="#">Adele</a></li>
	<li><a href="#">Agnes</a></li>
	<li><a href="#">Albert</a></li>
	<li><a href="#">Billy</a></li>
	<li><a href="#">Bob</a></li>
	<li><a href="#">Calvin</a></li>
	<li><a href="#">Cameron</a></li>
	<li><a href="#">Chloe</a></li>
	<li><a href="#">Christina</a></li>
	<li><a href="#">Diana</a></li>
	<li><a href="#">Gabriel</a></li>
	<li><a href="#">Glen</a></li>
	<li><a href="#">Ralph</a></li>
	<li><a href="#">Valarie</a></li>
</ul>

 五，表单组件

文本输入框

<input type="text" name="username" id="username" placeholder="请输入用户名" data-clear-btn="true"/><br />

ps:可以使用 data-clear-btn="true" 属性来添加清除输入框内容的按钮 (一个在输入框右侧的 X 图标)。清除输入框的按钮可以在 <input> 元素中使用，但不能在 <textarea> 中使用。 搜索框中 data-clear-btn 默认值为 "true" ，你可以使用 data-clear-btn="false" 移除该图标。

文本域：对于多行文本输入可使用 <textarea> 

<textarea></textarea>

ps:当键入一些文本时，文本域会自动调整大小以适应新增加的行

单选按钮、复选按钮

<fieldset data-role="controlgroup">
	<legend>地图模式:</legend>
	<label for="map1">街道</label>
	<input type="radio" name="map" id="map1" value="Map" checked="checked" />
	<label for="map2">卫星</label>
	<input type="radio" name="map" id="map2" value="Satellite" />
	<label for="map3">鸟瞰</label>
	<input type="radio" name="map" id="map3" value="Hybrid" />
</fieldset>

ps：请使用 data-role="controlgroup" 来把按钮组合在一起

<fieldset data-role="controlgroup" data-type="horizontal">
	<legend>类型:</legend>
	<input type="checkbox" name="genre" id="c1" />
	<label for="c1" >古装</label>
    <input type="checkbox" name="genre" id="c2" />
	<label for="c2" >言情</label>
	<input type="checkbox" name="genre" id="c3" />
	<label for="c3" >警匪</label>
</fieldset>

下拉框

<select>
   <option value="mon">星期一</option>
   <option value="tue">星期二</option>
   <option value="wed">星期三</option>
   <option value="thu">星期四</option>
   <option value="fri">星期五</option>
   <option value="sat">星期六</option>
   <option value="sun">星期日</option>
</select>

自定义下拉框

<select data-native-menu="false">
   <option value="">选择年份</option>
   <option value="2019">2019年</option>
   <option value="2020">2020年</option>
   <option value="2021">2021年</option>
   <option value="2022">2022年</option>
   <option value="2023">2023年</option>
</select>

数据项分组下拉框

<select name="delivery" id="delivery" data-native-menu="false">
	<option value="standard">地面</option>
	<optgroup label="Digital">
	    <option value="barcode" selected>E-Ticket</option>
		<option value="nfc">NFC</option>
	</optgroup>
</select>

禁用下拉框

 <option value="jQuery Mobile" disabled>jQueryMobile</option>  

多选下拉框

<select name="day" id="day" multiple="multiple" data-native-menu="false">
	<option>天</option>
	<option value="mon">星期一</option>
	<option value="tue">星期二</option>
	<option value="wed">星期三</option>
	<option value="thu">星期四</option>
	<option value="fri">星期五</option>
	<option value="sat">星期六</option>
	<option value="sun">星期日</option>
</select>

滑块

<input type="range" name="points" id="points" value="50" min="0" max="100" data-popup-enabled="true" data-show-value="true" data-highlight="true">

翻转开关

<select id="slider" data-role="slider">
	<option value="1">开</option>
	<option value="0">关</option>
</select>

切换开关 

<input type="checkbox" data-role="flipswitch" name="switch" id="switch"  data-on-text="打开" data-off-text="关闭">