页面 加载时候 弹出 loading.gif 代码

<img id="submitImg" border="0" src="/test/images/loading.gif"
  style="position: absolute; display: none; visibility: visible">
 <input id="checkSubmitFlg" name="checkSubmitFlg" value="0"
  style="display: none">
 <script type="text/javascript"><!--
function submitTest() {   
var checkSubmitFlg = window.document.getElementById("checkSubmitFlg").value;   
if (checkSubmitFlg == '1') {
                alert("/u540e/u53f0/u6570/u636e/u5904/u7406/u4e2d/uff0c/u8bf7/u60a8/u7a0d/u7b49/u2026/u2026/u2026/u2026");
                return false;
        }
        window.document.getElementById("checkSubmitFlg").value="1";
var style="position: absolute;left:"+(window.screen.width/2-150)+"; top:"+(document.body.scrollTop+(document.body.clientHeight-150)/2)+";visibility:visible"
window.document.getElementById("submitImg").style.left=window.screen.width/2-150;
window.document.getElementById("submitImg").style.top=document.body.scrollTop+(document.body.clientHeight-150)/2;
window.document.getElementById("submitImg").style.display="";
window.status="/u4e1a/u52a1/u5904/u7406/u4e2d/u2026/u2026/u2026/u2026";
        return true;
}

//-->
</script>
<h:form οnsubmit="return submitTest();">

 

 

以上是对画面改动代码 实现

自己写一个js,直接调用就可以实现

但是有个bug就是 在页面中有的按钮不实现loading图片加载,取消不了问题

一下是js代码

load();// οnsubmit="return submitTest();"
function load() {
 document.forms[0].attachEvent('onsubmit', submitTest);
 document.forms[0].innerHTML = document.forms[0].innerHTML
   + "<img id='submitImg' border='0' src='/test/images/loading.gif'"
   + "style='position: absolute; display: none; visibility: visible'>"
   + "<input id='checkSubmitFlg' name='checkSubmitFlg' value='0'"
   + "style='display: none'> ";
}

function submitTest() {
 var checkSubmitFlg = window.document.getElementById("checkSubmitFlg").value;
 if (checkSubmitFlg == '1') {
  alert("/u540e/u53f0/u6570/u636e/u5904/u7406/u4e2d/uff0c/u8bf7/u60a8/u7a0d/u7b49/u2026/u2026/u2026/u2026");
  return false;
 }
 window.document.getElementById("checkSubmitFlg").value = "1";
 var style = "position: absolute;left:"
   + (window.screen.width / 2 - 150)
   + "; top:"
   + (document.body.scrollTop + (document.body.clientHeight - 150) / 2)
   + ";visibility:visible"
 window.document.getElementById("submitImg").style.left = window.screen.width / 2 - 150;
 window.document.getElementById("submitImg").style.top = document.body.scrollTop
   + (document.body.clientHeight - 150) / 2;
 window.document.getElementById("submitImg").style.display = "";
 window.status = "/u4e1a/u52a1/u5904/u7406/u4e2d/u2026/u2026/u2026/u2026";
 return true;
}

以下是将 jqGrid 的加载 loading 样式更改为 layui 的 loading 样式的详细代码: 1. 在 HTML 文件中引入 layui 的 CSS 和 JS 文件: ```html <link rel="stylesheet" href="./layui/css/layui.css"> <script src="./layui/layui.js"></script> ``` 2. 找到 jqGrid 的 CSS 文件(一般为 ui.jqgrid.css),并找到以下 CSS 类: ```css .ui-jqgrid .loading { position: absolute; top: 45%; left: 45%; margin-top: -15px; margin-left: -50px; padding: 10px; font-weight: bold; background-color: #fff; border: 1px solid #666; -moz-border-radius: 5px; -webkit-border-radius: 5px; opacity: .8; } ``` 3. 将以上 CSS 类修改为以下代码: ```css .ui-jqgrid .loading { position: absolute; top: 50%; left: 50%; margin-top: -18px; margin-left: -18px; } ``` 4. 在 jqGrid 的初始化代码中,设置 `loadui` 为 `disable`,并添加 `loadComplete` 回调函数,例如: ```javascript $("#grid").jqGrid({ url: "data.json", loadui: "disable", loadComplete: function() { layui.use('layer', function(){ layer.closeAll('loading'); }); }, // other options }); ``` 在上述例子中,`loadui` 被设置为 `disable`,表示不使用 jqGrid 自带的 loading 样式。在 `loadComplete` 回调函数中,调用 layui 的 `layer.closeAll('loading')` 方法,以关闭 loading。 5. 在需要显示 loading 的地方,使用以下代码: ```javascript layui.use('layer', function(){ layer.load(2); }); ``` 在上述例子中,调用了 layui 的 `layer.load(2)` 方法,以显示 loading。其中,数字 2 表示 loading 样式的类型,可以根据需要进行修改。 这样就可以将 jqGrid 的加载 loading 样式更改为 layui 的 loading 样式了。完整代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jqGrid with layui loading</title> <link rel="stylesheet" href="./layui/css/layui.css"> <link rel="stylesheet" href="./jqGrid/css/ui.jqgrid.css"> <style> #grid { height: 400px; } </style> <script src="./jquery/jquery-3.6.0.min.js"></script> <script src="./layui/layui.js"></script> <script src="./jqGrid/js/i18n/grid.locale-cn.js"></script> <script src="./jqGrid/js/jquery.jqGrid.min.js"></script> <script> $(function() { $("#grid").jqGrid({ url: "data.json", datatype: "json", colModel: [ { label: "ID", name: "id", width: 75 }, { label: "名称", name: "name", width: 150 }, { label: "价格", name: "price", width: 150 }, { label: "库存", name: "stock", width: 150 } ], loadui: "disable", loadComplete: function() { layui.use('layer', function(){ layer.closeAll('loading'); }); }, viewrecords: true, width: 780, height: 250, rowNum: 20, rowList: [20, 50, 100], rownumbers: true, rownumWidth: 40, autowidth: true, shrinkToFit: false, pager: "#pager" }); $("#btnSearch").click(function() { layui.use('layer', function(){ layer.load(2); }); var postData = { name: $("#txtName").val(), price: $("#txtPrice").val() }; $("#grid").jqGrid("setGridParam", { postData: postData, page: 1 }).trigger("reloadGrid"); }); }); </script> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md-12"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">名称</label> <div class="layui-input-inline"> <input type="text" id="txtName" name="name" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">价格</label> <div class="layui-input-inline"> <input type="text" id="txtPrice" name="price" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="button" id="btnSearch" class="layui-btn layui-btn-primary">查询</button> </div> </div> </form> </div> <div class="layui-col-md-12"> <table id="grid"></table> <div id="pager"></div> </div> </div> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值