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

在使用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 引用：

[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函数：

[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内容，如图片等
});
}
//隐藏加载器.for jQuery Mobile 1.2.0
function hideLoader()
{
//隐藏加载器
$.mobile.loading('hide');
}
</script>

准备两个按钮，一个用于启动（显示）加载器，一个用于停止（隐藏）加载器：

[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'）：

当然，你可以调整$.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显示加载器的代码如下：

[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文档中对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这两个方法显示加载器了。

转载于:https://www.cnblogs.com/ranzige/p/3853947.html

jQuery Mobile 手动显示ajax加载器，提示加载中...相关推荐

php ci ajax用户登录,使用jQuery和CI显示AJAX调用数据库的数据
模型似乎和控制器一样工作. AJAX将结果显示为"null",所以我认为这是因为我们需要将数据作为json发送.如何将数据放到正确的格式,并在视图中显示任何想法使用jQuery和C ...
java spring包_java 自定义加载器，加载spring包，动态加载实现，jar包隔离，tomcat加载webapp方式...
java 自定义加载器,加载spring包,动态加载实现,jar包隔离,tomcat加载webapp方式发布时间:2018-08-20 12:02, 浏览次数:774 , 标签: java spri ...
【OS学习笔记】十实模式:实现一个程序加载器-程序加载器如何将用户程序加载到内存并执行
上一篇文章学习了以下内容: 用一种不同的分段方法,从另一个不同的的角度理解处理器的分段内存访问机制使用循环和条件转移指令来优化主引导扇区代码点击链接查看上一篇文章:点击链接查看对于主引导扇区部分 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
webpack使用加载器来加载CSS样式
前言: 对于webpack来说,每个文件都是一个模块,比如css.js.html.jpg等. 对于不同的模块,就得需要不同的加载器(Loaders)来处理,所以加载器是webpack最重要的功能. 安 ...
JQuery Mobile 手机显示页面偏小
转自:http://blog.csdn.net/starrexstar/article/details/8057400 今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列 ...
[转]JQuery Mobile 手机显示页面偏小_se7en3_新浪博客
今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列表页面和一个表单页面,页面中的组件呈现一切正常. 但出现了一个奇怪的问题,登陆页面大小正常,到了列表页面和表单页面就显得 ...
jQuery Mobile 中文手册 Ajax开发版(2)
ajaxEnabled (boolean, default: true): 同时设置页面中的链接和表单提交是否使用Ajax方法,也就是说表单的提交和a标记中的链接,都是采用ajax调用. 布尔类型,在 ...
android xml 加载错误提示,加载uixml文件失败打开wps时显示“加载XML文件失败１
打开wps时显示"加载XML文件失败." 打开wps时显示"加载XML文件失败1 关闭所有打开的Word文档: 开始 → 运行 → 粘贴上面复制的命令 → 确定. 在打开 ...

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

jQuery Mobile 手动显示ajax加载器，提示加载中...相关推荐

最新文章

热门文章