jQuery MiniUI

标题: 表单加载前显示遮罩和loading [打印本页]
作者: Aisin丿Gioro    时间: 2017-9-29 09:31:00     标题: 表单加载前显示遮罩和loading

表单加载前让body显示数据加载中请稍等和遮罩，表单点击保存时显示正在提交请稍后怎么做。
  1. function save(){
  2.         var form = new mini.Form("form1");
  3.         form.validate();
  4.         var errors = form.getErrorTexts();
  5.         if(errors!= null && errors.length >0){
  6.             var t = errors[0];
  7.             window.top.mini.alert(t);
  8.             return ;
  9.         }

  11.         if($("#savebtn").attr("disabled")=="disabled"){
  12.             return ;
  13.         }
  14.         $("#savebtn").attr("disabled","true");
  15.         var data = form.getData();
  16.         data.birthDate = mini.formatDate(data.birthDate,"yyyy-MM-dd");
  17.         data.intoAssoDate = mini.formatDate(data.intoAssoDate,"yyyy-MM-dd");
  18.         data.firstPracDate = mini.formatDate(data.firstPracDate,"yyyy-MM-dd");
  19.         data.rankDate = mini.formatDate(data.rankDate,"yyyy-MM-dd");
  20.         data.pracGraduateDate = mini.formatDate(data.pracGraduateDate,"yyyy-MM-dd");
  21.         data.pracCertDate = mini.formatDate(data.pracCertDate,"yyyy-MM-dd");
  22.         data.qualCertDate = mini.formatDate(data.qualCertDate,"yyyy-MM-dd");
  23.         data.certDate = mini.formatDate(data.certDate,"yyyy-MM-dd");
  24.         data.checkYear = $("#checkYear").val();

  26.         $.ajax({
  27.             type: "post",
  28.             url: "${pageContext.request.contextPath}/org/legal_lawyer/legal_add.action",
  29.             data:data,
  30.             dataType: "json",
  31.             success: function(text){
  32.                 mini.unmask();
  33.                 var result = mini.decode(text);
  34.                 if(result.res == true){
  35.                     window.top.mini.showMessageBox({
  36.                         title: "提示",
  37.                         buttons: ["ok"],
  38.                         iconCls: "mini-messagebox-info",
  39.                         message: result.msg ,
  40.                         callback:function () {
  41.                             window.opener.gridLoad();
  42.                             cancel("ok");
  43.                         }
  44.                     });

  46.                 }else{
  47.                     $("#savebtn").removeAttr("disabled");
  48.                     window.top.mini.showMessageBox({
  49.                         title: "提示",
  50.                         buttons: ["ok"],
  51.                         iconCls: "mini-messagebox-error",
  52.                         message: result.msg,
  53.                         callback:function () {

  55.                         }
  56.                     });
  57.                 }
  58.             }, error: function(jqXHR, textStatus, errorThrown) {
  59.                 $("#savebtn").removeAttr("disabled");
  60.                 mini.unmask();
  61.                 window.top.mini.showMessageBox({
  62.                     title: "错误",
  63.                     buttons: ["ok"],
  64.                     iconCls: "mini-messagebox-warning",
  65.                     message: jqXHR.responseText
  66.                 });
  67.             }
  68.         });
  69.     }
复制代码

作者: dforce    时间: 2017-9-29 14:37:30

mini.mask({
            el: document.body,
            cls: 'mini-mask-loading',
            html: '加载中...'
        });
$.ajax({
    success:function(){
    mini.unmask(document.body);
    }
})

可以使用mini.mask来遮罩，在ajax交互成功后取消掉遮罩。



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2