jquery mobile 的loading提示“正在加载...”在不同版本中的不同实现方式

在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>

　　

 

转载于:https://www.cnblogs.com/lfhy/p/7243213.html