移動互聯網的發展，促生了各種各樣的移動Web框架。jQuery Mobile 是一個針對觸摸體驗的 web UI 開發框架，很容易就可以把 Web App 包裝成適合 Android 與 iOS等觸屏移動設備的 Javascript 庫，與 HTML5結合可以很方便快速的開發出一款具有良好界面及用戶體驗的 Web App??，而且不需要安裝任何東西，只需將需要的 *.js 和 *.css 文件直接包含到 web 頁面中即可。
下拉菜單:
設置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>
以上內容是小編給大家分享的jQuery mobile 移動web(4)的相關知識，希望大家喜歡。
