在使用jQuery Mobile開發時，有時候我們需要在請求ajax期間，顯示載入提示框（例如：一個旋轉圖片+一個提示：載入中...）。這個時候，我們可以手動顯示jQuery Mobile的載入器，大致流程如下：
1. 啟動載入器，顯示“載入中...”；
2. 進行ajax請求，請求完成後更新頁面資料，重新整理jQuery Mobile控制項樣式；
3. 關閉載入器。
下面就來講解jQuery Mobile 1.2.0 和 1.1.0 中手動顯示載入器的方法（很簡單，幾行代碼就OK了！）。
首先是jQuery Mobile 1.2.0 引用：
<!DOCTYPE html><html> <head> <title>Ajax測試</title> <meta charset="gbk"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 從官方下載的檔案放在項目的 jquery-mobile 目錄中 --> <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/> <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/> <script src="jquery-mobile/jquery-1.8.2.min.js"></script> <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script> <head>
編寫javascript函數：
<script>//顯示載入器function showLoader() { //顯示載入器.for jQuery Mobile 1.2.0 $.mobile.loading('show', { text: '載入中...', //載入器中顯示的文字 textVisible: true, //是否顯示文字 theme: 'a', //載入器主題樣式a-e textonly: false, //是否只顯示文字 html: "" //要顯示的html內容，片等 });}//隱藏載入器.for jQuery Mobile 1.2.0function hideLoader(){ //隱藏載入器 $.mobile.loading('hide');}</script>
準備兩個按鈕，一個用於啟動（顯示）載入器，一個用於停止（隱藏）載入器：
<body> <div data-role="page"> <!-- 頭部 --> <div data-role="header"> <h3>Ajax測試</h3> </div> <!-- 內容 --> <div data-role="content"> <h3>Ajax測試</h3> <input type="button" value="顯示ajax載入器" onclick="showLoader()"/> <input type="button" value="隱藏ajax載入器" onclick="hideLoader()"/> </div> </body>
效果如下（主題為：'a'）：
當然，你可以調整$.mobile.loading('show', { ... }中的參數，實驗各種不同的載入器效果。
載入器的具體說明見jQuery Mobile 1.2.0 官方demo示範說明：
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
注意：jQuery Mobile1.1.0中顯示ajax載入器與1.2.0版本完全不同！坑爹！
jQuery Mobile 1.1.0顯示載入器的代碼如下：
<script> //顯示載入器 function showLoader() { //顯示載入器.for jQuery Mobile 1.1.0 $.mobile.loadingMessage = '載入中...'; //顯示的文字 $.mobile.loadingMessageTextVisible = true; //是否顯示文字 $.mobile.loadingMessageTheme = 'a'; //載入器主題樣式a-e $.mobile.showPageLoadingMsg(); //顯示載入器 } //隱藏載入器.for jQuery Mobile 1.1.0 function hideLoader() { //隱藏載入器 $.mobile.hidePageLoadingMsg(); }</script>
顯示的效果倒是差不多。
官方1.2.0文檔中對1.1.0的說明如下：
The page loading dialog was previously configured globally with three settings
$.mobile.loadingMessage,
$.mobile.loadingMessageTextVisible, and
$.mobile.loadingMessageTheme
which are now deprecated. In addition to the methods for showing and hiding,
$.mobile.showPageLoadingMsg and
$.mobile.hidePageLoadingMsg are also deprecated.
意思就是說：在1.2.0版本不在使用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg這兩個方法顯示載入器了。
有問題歡迎提問交流！
轉載請註明原文地址：http://blog.csdn.net/zht666/article/details/8563025
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
