有序列表

 　　<div data-role="content">
　　　　<ol 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>
　　　　</ol>
 　　</div>

只讀列表

 　　<div data-role="content">
　　　　<ul data-role="listview" data-inset="true">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ul>
 　　</div>

可分割按鈕列表

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d">
　　　　　　<li><a href="#"> List 1</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 2</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 3</a><a href="#"></a></li>
　　　　</ul>
 　　</div>

含有氣泡式計(jì)數(shù)列表

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a><span class="ui-li-count">33</span></li>
　　　　　　<li><a href="#"> List 2</a><span class="ui-li-count">222</span></li>
　　　　　　<li><a href="#"> List 3</a><span class="ui-li-count">111</span></li>
　　　　</ul>
 　　</div>

配置選項(xiàng)。

 　　jquery Mobile 在開始運(yùn)行的時(shí)候，它會(huì)在document 對象上觸發(fā)一個(gè)mobileinit 事件。我們可以通過該事件重寫默認(rèn)的相應(yīng)的函數(shù)。配置各種屬性參數(shù)。

 　　使用方法如下：　　

　$(document).bind("mobileinit",function(){ 
　　　　　　　　//在這里添加用戶自定義代碼。
 　　　　})
 　　　　<script src="jquery.js"></script>
 　　　　<script src="自定義事件處理函數(shù)的js文件"></script>
 　　　　<script src="jquerymobile.js"></script>

　　　　為開發(fā)者提供一個(gè)對象：$.mobile. 該對象的作用是配置各種選項(xiàng)及默認(rèn)配置?！?/p>

$(document).bind("mobileinit",function(){ 
　　　　　　$.mobile.foo = "foo";l
　　　　})

 　　　　可配置選項(xiàng)：

 　　　　1.ns

　　　　　　類型：字符串，默認(rèn)是非空字符串。
 　　　　　　用法：$.mobile.ns="mynamespace"
　　　　　　描述：自定義命名空間，避免命名空間。

 　　　　2.autolnitializePage

　　　　　　類型：布爾類型,默認(rèn)為true。
 　　　　　　用法：$.mobile.autoInitializePage = false
　　　　　　描述：默認(rèn)情況下，當(dāng)頁面DOM元素準(zhǔn)備就緒后，程序會(huì)自動(dòng)加載$.mobile.initializePage 函數(shù) 如果設(shè)置為

false

　　　　　　頁面 就不會(huì)成立，并保持隱藏狀態(tài)。

 　　　　3.subPageUrlKey

　　　　　　類型：字符串，默認(rèn)值是 ui-page.

　　　　　　用法：$.mobile.subPageUrlkey = "page"

　　　　　　描述：改變jQuery Mobile 視圖在 URL 地址中的key 參數(shù)名，當(dāng)選參數(shù)改成 subPageUrlKey = "page "時(shí) url 地址

會(huì)被改成

 　　　　　　example.html?page=subpage。

 　　　　4.activePageClass

　　　　　　類型：字符串，默認(rèn)值是 ui-page-active

　　　　　　用法：$.mobile.activePageClass = “ui-ns-page-active”。

　　　　　　描述：主要功能是自定義活動(dòng)狀態(tài)頁面和過度狀態(tài)時(shí)的視圖css樣式。

 　　　　5.activeBtnClass

　　　　　　類型：字符串，默認(rèn)值是ui-btn-active

　　　　　　用法：$.mobile.activeBtnClass = "ui-ns-page-active"

　　　　　　描述：該選項(xiàng)的主要功能是自定義處于活動(dòng)狀態(tài)的那妞的樣式風(fēng)格。

 　　　　6.ajaxEnabled

　　　　　　類型：布爾值，默認(rèn)值是true

　　　　　　用法：$.mobile.ajaxEnabled = false

　　　　　　描述：設(shè)置當(dāng)單擊連接或提交表單或按鈕時(shí)，是否使用Ajax方式加載頁面或提交數(shù)據(jù)。

　　　　7.hashListeningEnabled

　　　　　　類型：布爾值，默認(rèn)值是true；

 　　　　　　用法：$.mobile.hashListeningEnabled = false

　　　　　　描述：設(shè)置是否自動(dòng)監(jiān)聽和處理location.hash的變化，如果設(shè)置為false ，可以使用手動(dòng)的方式處理hash 的變化，或者簡單使用連接

　　　　　　　　　　地址進(jìn)行跳轉(zhuǎn)。

 　　　　8.defaultPageTransition

　　　　　　類型:字符串，默認(rèn)值是slide

　　　　　　用法：$.mobile.defaultPageTransition = “fade”

　　　　　　描述：該選項(xiàng)參數(shù)主要設(shè)置頁面切換默認(rèn)的效果，如果設(shè)置為none ，頁面切換時(shí)就不會(huì)有效果，可選的參數(shù) slideup (左右滑入)

　　　　　　　　slideup(由下向上滑動(dòng)) slidedown （由上像下滑入）pop （由中心）

 　　　　9.touchOverflowEnabled

　　　　　　類型：布爾值，默認(rèn)值是false

　　　　　　用法：$.mobile.touchOverflowEnabled = true

　　　　　　描述：是否使用設(shè)備的原生態(tài)滾動(dòng)特性。

　　　　10.defaultDialogTransition

　　　　　　類型：字符串,默認(rèn)值是pop

　　　　　　用法：$.mobile.defaultDialogTransition = "none"

　　　　　　描述:設(shè)置Ajax 對話框的彈出效果，若設(shè)置為none 則沒有過度效果。

　　　　11.minScrollBack

　　　　　　類型：字符串，默認(rèn)值是150

　　　　　　用法：$.mobile.minScrollBack = “200”

　　　　　　描述：當(dāng)滾動(dòng)超出所設(shè)置的高度時(shí)才會(huì)觸發(fā)滾動(dòng)位置記憶功能。

　　　　12.loadingMessage

　　　　　　類型：字符串默認(rèn)值是loading

　　　　　　用法：$.mobile.loadingMessage = "加載中"

　　　　　　描述：設(shè)置頁面加載狀態(tài)的文本內(nèi)容。如果設(shè)置為false,則不顯示任何內(nèi)容。

　　　　13.pageLoadErrorMessage

　　　　　　類型：字符串，默認(rèn)值為 Error Loading Page

　　　　　　用法：$.mobile.pageLoadErrorMessage = "頁面加載失敗"

　　　　　　描述：設(shè)置當(dāng)Ajax頁面請求失敗時(shí)顯示的提示的文本內(nèi)容

 　　　　14.gradeA

　　　　　　類型：布爾值，默認(rèn)值是$.support.mediaquery 的值

 　　　　　　用法：$.mobile.gradeA

　　　　　　描述：當(dāng)瀏覽器符合所有的支持的條件時(shí)候才會(huì)返回true.

JQuery Mobile 和 HTML5 的3個(gè)缺點(diǎn)

1.比原生程序運(yùn)行慢：在我看來最大的缺點(diǎn)是，即使是在最新的Android和iOS硬件上（雙核Tegra 2 Android手機(jī)，雙核iPad2平板），JQuery Mobile應(yīng)用程序都會(huì)明顯慢

于原生程序。尤其是在Android上，瀏覽器比起iOS更慢且bug更多（雖然谷歌是專注web領(lǐng)域的公司）。我沒有在更早的Android設(shè)備上測試我的程序，也許根本就不能運(yùn)行（例如Android G1）。我相信在未來的12-24個(gè)月，硬件速度會(huì)很快得到提升（例如，四核設(shè)備2011年馬上就要上市），性能也許很快就不會(huì)成為問題。但是今天，它確實(shí)是一個(gè)缺點(diǎn)。如果你只專注于iOS，你大可以期待一下瀏覽器的性能，至少它在這方面是可靠的（不像Android，黑莓等等）

2.古怪（跨瀏覽器、跨平臺(tái)開發(fā)）：JQuery Mobile現(xiàn)在仍是beta版本，因此我遇到了很多bug。也就是說，JQuery團(tuán)隊(duì)還在積極地回復(fù)GitHub上提出的問題。我認(rèn)為其中最大的一個(gè)問題是各種瀏覽器在不同的手機(jī)平臺(tái)上古怪的表現(xiàn)。這個(gè)問題一直為人詬病。應(yīng)用程序可能看上去有些古怪——雖然我認(rèn)為JQuery Mobile團(tuán)隊(duì)在widget和主題上做得很棒，但的確和原生程序看起來有顯著的不同。這個(gè)問題到底對用戶有多大影響不得而知，但是這一點(diǎn)需要引起注意。

3. 有限的能力 vs 原生程序：很明顯，運(yùn)行在瀏覽器上的JavaScript不能完全地訪問設(shè)備的很多特性。一個(gè)典型的例子就是攝像頭。然而，類似PhoneGap這樣的工具能夠幫助解決很多常見問題。實(shí)際上，我已經(jīng)開始將我的應(yīng)用程序通過PhoneGap將幾個(gè)版本部署到iOS和Android上，使用的是原生Facebook綁定，效果令我映像深刻。我會(huì)在未來的博客中寫一些使用PhoneGap的經(jīng)驗(yàn)。

最新評論