まず、公式テーマ
2 jQueryのモバイルテーマバージョン1.4.5スタイルを提供し、それぞれ文字及び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>
使用ボタンを作成するには、<ボタン>要素
<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>要素を追加データ-役割=「リスト・ディバイダ」属性を分割します。
<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>
リストセグメンテーション - 自動
データ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>
V.フォームコンポーネント
テキスト入力ボックス
<input type="text" name="username" id="username" placeholder="请输入用户名" data-clear-btn="true"/><br />
PS:クリア入力ボックスには、データ・クリアBTN =「true」属性を使用してコンテンツボタン(右へX入力ボックスのアイコンの1)を追加することができます。クリアボタン入力ボックスには、<input>要素ではなく、<TEXTAREA>にして使用することができます。データ・クリアBTN検索ボックスのデフォルトは「真」である、あなたは、アイコンを削除するために、データクリア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:一緒に入れて使用したデータ・役割=「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="关闭">