zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    JavaAPI基础(1)
    类与对象、封装、构造方法
    Java语言基础
    Request请求的应用
    Response的应用
    java生成动态验证码
    Servlet的配置
    常见的状态码。。
    简单学习【1】——打包JS
    NodeJS2-2环境&调试----引用系统内置模块,引用第三方模块
  • 原文地址:https://www.cnblogs.com/lfhy/p/7243213.html
Copyright © 2011-2022 走看看