网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 jQuery简单实现提交数据出现loading进度条的方法
内容
    本文实例讲述了jQuery简单实现提交数据出现loading进度条的方法。分享给大家供大家参考,具体如下:
    html部分代码如下,复制然后引入类库即可使用
    <html>
    <head>
    <style type="text/css">
     #bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.2; opacity:.2; filter: alpha(opacity=70);}
     .loading{display: none; position: absolute; top: 50%; left: 50%; z-index:1002; }
     </style>
    </head>
    <body>
      <div id="bg"></div>
      <input type="button" value="Save" id="btnSave" name="btnSave" />
      <div><img src="loading.gif"></div>
    </body>
    </html>
    jQuery部分代码如下:
    <script src="jquery-1.11.0.min.js" type="text/javascript"></script><!--自己下载类库-->
    <script type="text/javascript">
    $(function(){
      $("#btnSave").click(function(){
        $("#bg,.loading").show();
        $.ajax({
          async:false,
          url:"time.php",
          type:"post",
          data:{},
          success:function(mes){
            $("#bg,.loading").show();
          }
        })
      })
    })
    </script>
    php代码:
    for($i=0;$i<10000000;$i++){
    }
    希望本文所述对大家jQuery程序设计有所帮助。
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/15 8:58:33