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

      

  • 相关阅读:
    网页中15秒后重新发送验证码,多少秒后发送验证码
    javascript 数组去重 unique
    微信支付和微信支付通知基于sdk的说明
    php对象序列化和cookie的问题,反序列化false
    php对象序列化总出错false
    图片懒加载lazyload.js详解
    手机联动地址选择框,移动端地址联动
    Java类加载原理解析(转)
    location对象介绍
    SpringMVC使用fastjson自定义Converter支持返回jsonp格式(转)
  • 原文地址:https://www.cnblogs.com/lfhy/p/7243213.html
Copyright © 2020-2023  润新知