jquery mobile 移动web(5)_jquery

Ordered list

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

Read-only list

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

Separable button list

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

Contains bubble count list

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

Configuration options.

When jquery Mobile starts running, it will trigger a mobileinit event on the document object. We can override the default corresponding function through this event. Configure various attribute parameters.

How to use it:

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

Provide developers with an object: $.mobile. The purpose of this object is to configure various options and default configurations.

$(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 的值

Usage: $.mobile.gradeA

Description: True will be returned when the browser meets all supported conditions.

3 Disadvantages of JQuery Mobile and HTML5

1. Runs slower than native apps: The biggest disadvantage in my opinion is that even on the latest Android and iOS hardware (dual-core Tegra 2 Android phones, dual-core iPad2 tablets), JQuery Mobile apps are significantly slower

In native programs. Especially on Android, the browser is slower and more buggy than on iOS (although Google is a company focused on the web). I didn't test my program on older Android devices, maybe it won't run at all (e.g. Android G1). I believe that in the next 12-24 months, hardware speed will quickly improve (for example, quad-core devices will be available soon in 2011), and performance may not be an issue soon. But today, it's really a drawback. If you're only focusing on iOS, you can expect browser performance, at least it's reliable in that regard (unlike Android, BlackBerry, etc.)

2. Weird (cross-browser, cross-platform development): JQuery Mobile is still a beta version, so I encountered a lot of bugs. That said, the JQuery team is still actively responding to issues raised on GitHub. I think one of the biggest issues is the weird behavior of various browsers on different mobile platforms. This issue has always been criticized. The app may look a little weird - while I think the JQuery Mobile team did a great job with the widgets and themes, it does look significantly different than native apps. It's unknown how much of an impact this issue has on users, but it's something to be aware of.

3. Limited capabilities vs native programs: Obviously, JavaScript running in the browser cannot fully access many features of the device. A typical example is the camera. However, tools like PhoneGap can help solve many common problems. I've actually started deploying several versions of my app to iOS and Android via PhoneGap, using native Facebook bindings, and I'm impressed with the results. I will write about my experience using PhoneGap in a future blog.