當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

jQuery Mobile 手动显示ajax加载器，提示加载中...

發(fā)布時(shí)間：2023/12/18 编程问答 120 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery Mobile 手动显示ajax加载器，提示加载中... 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在使用jQuery Mobile開(kāi)發(fā)時(shí)，有時(shí)候我們需要在請(qǐng)求ajax期間，顯示加載提示框（例如：一個(gè)旋轉(zhuǎn)圖片+一個(gè)提示：加載中...）。這個(gè)時(shí)候，我們可以手動(dòng)顯示jQuery Mobile的加載器，大致流程如下：

1. 啟動(dòng)加載器，顯示“加載中...”；

2. 進(jìn)行ajax請(qǐng)求，請(qǐng)求完成后更新頁(yè)面數(shù)據(jù)，刷新jQuery Mobile控件樣式；

3. 關(guān)閉加載器。

下面就來(lái)講解jQuery Mobile 1.2.0 和 1.1.0 中手動(dòng)顯示加載器的方法（很簡(jiǎn)單，幾行代碼就OK了！）。

首先是jQuery Mobile 1.2.0?引用：

[html]?view plaincopy

<!DOCTYPE?html>??

<html>??

????<head>??

????????<title>Ajax測(cè)試</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>??

編寫(xiě)javascript函數(shù)：

[javascript]?view plaincopy

<script>??

//顯示加載器??

function?showLoader()?{??

????//顯示加載器.for?jQuery?Mobile?1.2.0??

????$.mobile.loading('show',?{??

????????text:?'加載中...',?//加載器中顯示的文字??

????????textVisible:?true,?//是否顯示文字??

????????theme:?'a',????????//加載器主題樣式a-e??

????????textonly:?false,???//是否只顯示文字??

????????html:?""???????????//要顯示的html內(nèi)容，如圖片等??

????});??

}??

//隱藏加載器.for?jQuery?Mobile?1.2.0??

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測(cè)試</h3>??

????????</div>??

??????????

????????<div?data-role="content">??

????????????<h3>Ajax測(cè)試</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)各種不同的加載器效果。

加載器的具體說(shuō)明見(jiàn)jQuery Mobile 1.2.0?官方demo演示說(shuō)明：

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()?{??

????????//顯示加載器.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文檔中對(duì)1.1.0的說(shuō)明如下：

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.

意思就是說(shuō)：在1.2.0版本不在使用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg這兩個(gè)方法顯示加載器了。

轉(zhuǎn)載于:https://www.cnblogs.com/ranzige/p/3853947.html

總結(jié)

以上是生活随笔為你收集整理的jQuery Mobile 手动显示ajax加载器，提示加载中...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：如何解决eclipse里面tomcat
下一篇： BZOJ.2741.[FOTILE模拟赛