81,092
社区成员
发帖
与我相关
我的任务
分享按钮提交后，显示等待画面,等后台数据加载完成在隐藏等待画面显示数据，最好不要用Ajxs，如何实现，求大神
<form id="myForm" method="post" action="" name="from1">
<div id="selectday" >
<table>
<tr>
<td>
<input id="queryBtn" class="com button" type="button" value="提交"/>
</td>
</tr>
</table>
</div>
</from>
...全文
请发表友善的回复…
发表回复
枫醉秋 2013-09-24
- 打赏
- 举报
+1[/quote]
我也知道利用DIV在最外面加一层就可以，但是具体的不太会实现，JS里面如何判断后台加载是否完成，如何在点击按钮的时候让最外层DIV显示出来，能否给一个比较详细的代码[/quote]
利用这句判断 document.readyState == "complete"
lflinfan 2013-09-24
- 打赏
- 举报
+1[/quote]
我也知道利用DIV在最外面加一层就可以，但是具体的不太会实现，JS里面如何判断后台加载是否完成，如何在点击按钮的时候让最外层DIV显示出来，能否给一个比较详细的代码
效林少爷 2013-09-24
- 打赏
- 举报
+1
闲去野鹤 2013-09-24
- 打赏
- 举报
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
//String query = (String)request.getAttribute("query");
//System.out.println(query);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航</title>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alertInfo("m1");
$("#event").load("<%=path%>/page/event/event.jsp");
$("#daohang a").click(function (){
$(".operate").css("display","none");
// $("#tabs1").css("display","none");
//$("#tabs-1").empty();
var className = $(this).parent().attr("id");
switch (className) {
case "m1":
alertInfo(className);
if ($("#event").html() == "") {
$("#event").load("<%=path%>/page/event/event.jsp");
}
$("#event").css("display","block");
//$("#tabs1").css("display","block");
break;
case "m2":
alertInfo(className);
if ($("#curve").html() == "") {
$("#curve").load("<%=path%>/page/curve/curve.jsp");
}
$("#curve").css("display","block");
break;
case "m3":
alertInfo(className);
if ($("#powerFactor").html() == "") {
$("#powerFactor").load("<%=path%>/page/powerFactor/powerFactor.jsp");
}
$("#powerFactor").css("display","block");
break;
case "m4":
alertInfo(className);
if ($("#consumeEle").html() == "") {
//$("#consumeEle").load("<%=path%>/page/event/event.jsp");
}
$("#consumeEle").css("display","block");
break;
case "m5":
alertInfo(className);
if ($("#line_loss").html() == "") {
// $("#line_loss").load("<%=path%>/page/curve/curve.jsp");
}
$("#line_loss").css("display","block");
break;
case "m6":
alertInfo(className);
if ($("#balance").html() == "") {
// $("#balance").load("<%=path%>/page/powerFactor/powerFactor.jsp");
}
$("#balance").css("display","block");
break;
case "m7":
alertInfo(className);
if ($("#pullCloseBrake").html() == "") {
$("#pullCloseBrake").load("<%=path%>/page/pullCloseBrake/pullCloseBrake.jsp");
}
$("#pullCloseBrake").css("display","block");
break;
case "m8":
alertInfo(className);
if ($("#collectFail").html() == "") {
$("#collectFail").load("<%=path%>/page/collectFail/collectFail.jsp");
}
$("#collectFail").css("display","block");
break;
case "m9":
alertInfo(className);
if ($("#eleQuantity").html() == "") {
$("#eleQuantity").load("<%=path%>/page/eleQuantity/eleQuantity.jsp");
}
$("#eleQuantity").css("display", "block");
break;
}
});
});
function alertInfo(id) {
var id_char = id.substr(0, 1);
var id_int = id.substr(1, 2);
var count = 10;
for ( var i = 1; i < count; i++) {
if (id == id_char + i) {
$("#" + id + " a").css('background-color', '#0f5f55');
$("#" + id + " a").css('color', '#dcf9f5');
} else {
$("#" + id_char + i + " a").css('background-color', '#dcf9f5');
$("#" + id_char + i + " a").css('color', '#0f5f55');
}
}
}
var loadIntVal;
function clearIntVal() {
window.clearInterval(loadIntVal);
}
</script>
<link type="text/css" href="<%=request.getContextPath()%>/css/style.css"
rel="stylesheet" />
<link rel="stylesheet" type="text/css"
href="<%=path%>/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=path%>/zTreeStyle/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="<%=path%>/zTreeStyle/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/My97DatePicker/WdatePicker.js" charset="UTF-8"></script>
</head>
<body style="overflow: hidden;">
<div id="daohang">
<ul>
<li id="m1"><a onclick="clearIntVal()" style="cursor: pointer;">事件上报</a>
</li>
<li id="m2"><a onclick="clearIntVal()" style="cursor: pointer;">电压电流曲线</a>
</li>
<li id="m3"><a onclick="clearIntVal()" style="cursor: pointer;">有功无功功率因素</a>
</li>
<li id="m4"><a onclick="clearIntVal()" style="cursor: pointer;">用电查询报表</a>
</li>
<li id="m5"><a onclick="clearIntVal()" style="cursor: pointer;">线损统计查询</a>
</li>
<li id="m6"><a onclick="clearIntVal()" style="cursor: pointer;">变电站平衡查询</a>
</li>
<li id="m7"><a onclick="clearIntVal()" style="cursor: pointer;">拉合闸记录查询</a>
</li>
<li id="m8"><a onclick="clearIntVal()" style="cursor: pointer;">采集失败查询</a>
</li>
<li id="m9"><a onclick="clearIntVal()" style="cursor: pointer;">电表抄表电量查询</a>
</li>
</ul>
</div>
<div id="event" class="operate"></div>
<div id="curve" class="operate"></div>
<div id="powerFactor" class="operate"></div>
<div id="consumeEle" class="operate"></div>
<div id="line_loss" class="operate"></div>
<div id="balance" class="operate"></div>
<div id="pullCloseBrake" class="operate"></div>
<div id="collectFail" class="operate"></div>
<div id="eleQuantity" class="operate"></div>
</body>
</html>
我们的项目是这样做的。不知对你有没有帮助
枫醉秋 2013-09-24
- 打赏
- 举报
利用一个div悬浮再画面上就可以了
