在jquery mobile开发中,在页面的切换、或者ajax获取数据时由于网速慢等其他原因,会有一个加载的时间,如果能在这段时间给一个“正在加载。。。”的提示,用户体验会更好。下面来简单的介绍一下在jquery mobile中 “正在加载。。”提示怎么做。
首先准备工作:要在页面中引入jquery mobile的css 、js、 jquery 文件。
然后:拿两个按钮做个测试:
<input type="button" value="显示" οnclick="showLoader()" />
<input type="button" value="隐藏" οnclick="hideLoader()" />
js部分:
<script type="text/javascript">
//显示加载器
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>
这样就可以实现效果了
需要说明的是:我引用的的jquery mobile.js的版本是1.4的。在1.2及以下的版本中js是完全不同的。看下面的代码:
<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>