显示加载面板
问题描述:
我有我的ASP按钮对此我验证了一些数据,然后发射它的服务器端功能,它做工精细,它看起来像这样显示加载面板
<asp:Button CssClass="btnRequestFile" ID="btnSave" runat="server" Text="Request"
OnClientClick="if(clientValidate() == false) return false;" OnClick="btnSave_Click" />
所以在我的客户端功能我想显示加载面板,但装载盘不出现,直到有一些戒备这里被解雇是我的代码
function clientValidate() {
// $("#IDData").html('');
$.loading({ align: 'center', delay: 0, img: '../common/Content/images/shared/sq_loader_3.gif', onAjax: false, pulse: false });
$("#divLoadingImg").show();
alert("dfhdfh");
var isValid = false;
var objectData = null;
var liTags = $('#' + secondContainer).find('li');
if (liTags.length == 0) {
alert('Please select at least one question !');
}
else {
if (SaveConfiguration()) {
//alert('error occurred');
}
else {
//alert('error free');
isValid = true;
}
}
$("#divLoadingImg").hide();
$.loading(false);
return isValid;
}
我使用jquery.loading.min.js显示加载面板是不工作,我也试图在标记中放置一个div,只是显示隐藏它作为一个加载,但要没有任何建议可以做到。
答
地方潜水疗法 “SONU”,并给它一些ID
和jQuery的写入;
<script type="text/javascript">
$(document).ready(function() {
$("#div1").hide();
function clientValidate() {
$("#div1").show("slow");
});
});
</script>
发生在俯冲
答
<head>
<script type="text/javascript">
document.onload=hide_loading_div();
function show_loading_div(){
var my_loading_div = document.getElementById('the_loading_div');
my_loading_div.style.visibility = 'visible';
}
function hide_loading_div(){
var my_loading_div = document.getElementById('the_loading_div');
my_loading_div.style.visibility = 'hidden';
}
</script>
<style type="text/css">
.class_of_the_loading_div{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color: rgba(0,0,0,0.75);
text-align:center;
}
</style>
</head>
<body onload="hide_loading_div()">
Some elements, grids, buttons etc..
<asp:Button ID="btn_something" runat="server" Text="A Button" OnClientClick="show_loading_div()" OnClick="btn_something_Click" />
<div class="class_of_the_loading_div">
Write here LOADING or put a loading gif...
</div>
</body>
说明你的装载仪GIF:
- 加载面板是可见的开头(当页面正在初始化)
- 第一初始化后,
document.onload=hide_loading_div();
代码隐藏面板。 - 当你点击Asp按钮时,首先触发JS代码,然后再次显示面板。然后C#代码运行并在后台执行一段时间。
- 回发完成后,html body隐藏了面板,因为你写了
<body onload="hide_loading_div()">
- 你微笑,因为你很开心。
注意:如果您希望只使用加载div等面板来阻止页面的一部分,那么容器div将会“暗淡” - 必须有'position:relative;'属性和阻止div必须有'位置:绝对'属性(不固定)。