快捷導(dǎo)航

jQuery mobile 移動web(4)

更新時間：2015年12月20日 14:02:27 作者：檸檬先生

這篇文章主要介紹了jQuery mobile 移動web(4)的相關(guān)資料,需要的朋友可以參考下

移動互聯(lián)網(wǎng)的發(fā)展，促生了各種各樣的移動Web框架。jQuery Mobile 是一個針對觸摸體驗(yàn)的 web UI 開發(fā)框架，很容易就可以把 Web App 包裝成適合 Android 與 iOS等觸屏移動設(shè)備的 Javascript 庫，與 HTML5結(jié)合可以很方便快速的開發(fā)出一款具有良好界面及用戶體驗(yàn)的 Web App，而且不需要安裝任何東西，只需將需要的 *.js 和 *.css 文件直接包含到 web 頁面中即可。

下拉菜單:

　　設(shè)置label 元素的for 屬性為 select label 元素的文本內(nèi)容作為選項(xiàng)的名稱定義div元素并設(shè)置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?！　?/p>

<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 數(shù)據(jù)項(xiàng)的選擇菜單

 　　　<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>

以上內(nèi)容是小編給大家分享的jQuery mobile 移動web(4)的相關(guān)知識，希望大家喜歡。

您可能感興趣的文章: