jquery mobile 移動web(5)_jquery

順序付きリスト

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

バブル数リストが含まれます

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

設定オプション。

jquery Mobile の実行が開始されると、ドキュメント オブジェクトで mobileinit イベントがトリガーされます。このイベントを通じて、デフォルトの対応する関数をオーバーライドできます。さまざまな属性パラメータを設定します。

使用方法:

　$(document).bind("mobileinit",function(){ 
　　　　　　　　//在这里添加用户自定义代码。
 　　　　})
 　　　　<script src="jquery.js"></script>
 　　　　<script src="自定义事件处理函数的js文件"></script>
 　　　　<script src="jquerymobile.js"></script>

開発者にオブジェクト $.mobile を提供します。このオブジェクトの目的は、さまざまなオプションとデフォルト構成を構成することです。

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

 　　　　可設定選項：

 　　　　1.ns

　　　　　　類型：字串，預設為非空字串。
 　　　　　　用法：$.mobile.ns="mynamespace"
　　　　　　描述：自訂命名空間，避免命名空間。

 　　　　2.autolnitializePage

　　　　　　類型：布林類型,預設為true。
 　　　　　　用法：$.mobile.autoInitializePage = false
　　　　　　描述：預設情況下，當頁面DOM元素準備好後，程式會自動載入$.mobile.initializePage 函數 如果設定為

false

　　　　　　頁 就不會成立，並保持隱藏狀態。

 　　　　3.subPageUrlKey

　　　　　　類型：字串，預設值是 ui-page.

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

　　　　　　說明：改變jQuery Mobile 視圖在 URL 位址中的key 參數名，當選取參數改為 subPageUrlKey = "page "時 url 位址

會被改成

 　　　　　　example.html?page=subpage。

 　　　　4.activePageClass

　　　　　　類型：字串，預設值是 ui-page-active

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

　　　　　　描述：主要功能是自訂活動狀態頁面和過度狀態時的視圖css樣式。

 　　　　5.activeBtnClass

　　　　　　類型：字串，預設值是ui-btn-active

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

　　　　　　描述：此選項的主要功能是自訂處於活動狀態的那妞的樣式風格。

 　　　　6.ajaxEnabled

　　　　　　類型：布林值，預設值是true

　　　　　　用法：$.mobile.ajaxEnabled = false

　　　　　　描述：設定當點選連線或提交表單或按鈕時，是否使用Ajax方式載入頁面或提交資料。

　　　　7.hashListeningEnabled

　　　　　　類型：布林值，預設值是true；

 　　　　　　用法：$.mobile.hashListeningEnabled = false

　　　　　　描述：設定是否自動監聽和處理location.hash的變化，如果設定為false ，可以使用手動的方式處理hash 的變化，或者簡單使用連接

　　　　　　　　　　位址進行跳轉。

 　　　　8.defaultPageTransition

　　　　　　類型:字串，預設值是slide

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

　　　　　　描述：此選項參數主要設定頁面切換預設的效果，如果設定為none ，頁面切換時就不會有效果，可選的參數 slideup (左右滑入)

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

 　　　　9.touchOverflowEnabled

　　　　　　類型：布林值，預設值是false

　　　　　　用法：$.mobile.touchOverflowEnabled = true

　　　　　　描述：是否使用設備的原始生態滾動特性。

　　　　10.defaultDialogTransition

　　　　　　類型：字串,預設值是pop

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

　　　　　　描述:設定Ajax 對話框的彈出效果，若設定為none 則沒有過度效果。

　　　　11.minScrollBack

　　　　　　類型：字串，預設值是150

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

　　　　　　描述：當滾動超出所設定的高度時才會觸發滾動位置記憶功能。

　　　　12.loadingMessage

　　　　　　型別：字串預設值是loading

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

　　　　　　描述：設定頁面載入狀態的文字內容。如果設定為false,則不顯示任何內容。

　　　　13.pageLoadErrorMessage

　　　　　　類型：字串，預設值為 Error Loading Page

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

　　　　　　描述：設定當Ajax頁面要求失敗時顯示的提示的文字內容

 　　　　14.gradeA

　　　　　　類型：布林值，預設值是$.support.mediaquery 的值

 　　　　　　用法：$.mobile.gradeA

　　　　　　描述：當瀏覽器符合所有的支援的條件時候才會回傳true.

JQuery Mobile 和 HTML5 的3個缺點

1.比原生程式運行慢：在我看來最大的缺點是，即使是在最新的Android和iOS硬體上（雙核心Tegra 2 Android手機，雙核心iPad2平板），JQuery Mobile應用程式都會明顯慢

於原生程式。尤其是在Android上，瀏覽器比起iOS更慢且bug更多（雖然Google是專注web領域的公司）。我沒有在更早的Android設備上測試我的程序，也許根本就無法運行（例如Android G1）。我相信在未來的12-24個月，硬體速度很快就會提升（例如，四核心設備2011年馬上就要上市），效能也許很快就不會成為問題。但是今天，它確實是一個缺點。如果你只專注於iOS，你可以期待瀏覽器的效能，至少它在這方面是可靠的（不像Android，黑莓等等）

2.古怪（跨瀏覽器、跨平台開發）：JQuery Mobile現在仍是beta版本，因此我遇到了很多bug。也就是說，JQuery團隊還在積極回覆GitHub上提出的問題。我認為其中最大的一個問題是各種瀏覽器在不同的手機平台上古怪的表現。這個問題一直都是人詬病。應用程式可能看起來有些古怪——雖然我認為JQuery Mobile團隊在widget和主題上做得很棒，但的確和原生程式看起來有顯著的不同。這個問題到底對使用者有多大影響不得而知，但是這一點需要注意。

3. 有限的能力 vs 原生程式：很明顯，運行在瀏覽器上的JavaScript不能完全地存取設備的許多特性。一個典型的例子就是攝影機。然而，類似PhoneGap這樣的工具能夠幫助解決許多常見問題。實際上，我已經開始將我的應用程式透過PhoneGap將幾個版本部署到iOS和Android上，使用的是原生Facebook綁定，效果令我映像深刻。我會在未來的部落格中寫一些使用PhoneGap的經驗。