jquery mobile 的loading提示“正在加载...”在不同版本中的不同实现方式
在jquery mobile开发中,在页面的切换、或者ajax获取数据时由于网速慢等其他原因,会有一个加载的时间,如果能在这段时间给一个“正在加载。。。”的提示,用户体验会更好。下面来简单的介绍一下在jquery mobile中 “正在加载。。”提示怎么做。
首先准备工作:要在页面中引入jquery mobile的css 、js、 jquery 文件。
然后:拿两个按钮做个测试:
<input type="button" value="显示" onclick="showLoader()" /> <input type="button" value="隐藏" onclick="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>