生活随笔
收集整理的這篇文章主要介紹了
jQuery Mobile 手动显示ajax加载器，提示加载中...
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在使用jQuery Mobile開發(fā)時(shí)，有時(shí)候我們需要在請求ajax期間，顯示加載提示框（例如：一個(gè)旋轉(zhuǎn)圖片+一個(gè)提示：加載中...）。這個(gè)時(shí)候，我們可以手動(dòng)顯示jQuery Mobile的加載器，大致流程如下：
1. 啟動(dòng)加載器，顯示“加載中...”；
2. 進(jìn)行ajax請求，請求完成后更新頁面數(shù)據(jù)，刷新jQuery Mobile控件樣式；
3. 關(guān)閉加載器。
下面就來講解jQuery Mobile 1.2.0 和 1.1.0 中手動(dòng)顯示加載器的方法（很簡單，幾行代碼就OK了！）。
首先是jQuery Mobile 1.2.0 ?引用：
[html] ?view plaincopy
<!DOCTYPE?html>?? <html>?? ????<head>?? ????????<title>Ajax測試</title>?? ????????<meta?charset="gbk">?? ????????<meta?name="viewport"?content="width=device-width,?initial-scale=1">?? ???????? ????????<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函數(shù)：
[javascript] ?view plaincopy
<script>?? function?showLoader()?{?? ???? ????$.mobile.loading('show',?{?? ????????text:?'加載中...',? ????????textVisible:?true,? ????????theme:?'a',???????? ????????textonly:?false,??? ????????html:?""??????????? ????});?? }?? ?? function?hideLoader()?? {?? ???? ????$.mobile.loading('hide');?? }?? </script>?? 準(zhǔn)備兩個(gè)按鈕，一個(gè)用于啟動(dòng)（顯示）加載器，一個(gè)用于停止（隱藏）加載器：
[html] ?view plaincopy
<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加載器"?οnclick="showLoader()"/>?? ????????????<input?type="button"?value="隱藏ajax加載器"?οnclick="hideLoader()"/>?? ?????????????? ?????????</div>?? </body>?? 效果如下（主題為：'a'）：
?
當(dāng)然，你可以調(diào)整$.mobile.loading('show', { ... }中的參數(shù)，實(shí)驗(yàn)各種不同的加載器效果。
加載器的具體說明見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顯示加載器的代碼如下：
[javascript] ?view plaincopy
<script>?? ???? ????function?showLoader()?{?? ???????? ????????$.mobile.loadingMessage?=?'加載中...';????? ????????$.mobile.loadingMessageTextVisible?=?true;? ????????$.mobile.loadingMessageTheme?=?'a';???????? ????????$.mobile.showPageLoadingMsg();????????????? ????}?? ?? ???? ????function?hideLoader()?{?? ???????? ????????$.mobile.hidePageLoadingMsg();?? ????}?? </script>?? 顯示的效果倒是差不多。
官方1.2.0 文檔中對1.1.0 的說明如下：
The page loading dialog was previously configured globally with three settingsare now deprecated . In addition to the methods for showing and hiding,also deprecated .
意思就是說：在1.2.0版本不在使用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg這兩個(gè)方法顯示加載器了。
轉(zhuǎn)載于:https://www.cnblogs.com/ranzige/p/3853947.html
總結(jié)
以上是生活随笔 為你收集整理的jQuery Mobile 手动显示ajax加载器，提示加载中... 的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
