jquery+ajax+text文本框實現智能提示完整實例
683
2024-02-25
有序列表
<div data-role="content"> <ol data-role="listview" data-theme="g"> <li><a > List 1</a></li> <li><a > List 2</a></li> <li><a > List 3</a></li> </ol> </div>
只讀列表
<div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a > List 1</a></li> <li><a > List 2</a></li> <li><a > 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 > List 1</a><a ></a></li> <li><a > List 2</a><a ></a></li> <li><a > List 3</a><a ></a></li> </ul> </div>
含有氣泡式計數列表
<div data-role="content"> <ul data-role="listview" data-theme="g"> <li><a > List 1</a><span class="ui-li-count">33</span></li> <li><a > List 2</a><span class="ui-li-count">222</span></li> <li><a > List 3</a><span class="ui-li-count">111</span></li> </ul> </div>
配置選項。
jquery Mobile 在開始運行的時候，它會在document 對象上觸發一個mobileinit 事件。我們可以通過該事件重寫默認的相應的函數。配置各種屬性參數。
使用方法如下：
$(document).bind("mobileinit",function(){
//在這里添加用戶自定義代碼。
})
<script src="http://www.gimoo.net/t/1904/jquery.js"></script>
<script src="http://www.gimoo.net/t/1904/自定義事件處理函數的js文件"></script>
<script src="http://www.gimoo.net/t/1904/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更多（雖然谷歌是專注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的經驗。
