我想在blockUI
的回发期间实现一个jquery Asp.Net
来弹出并显示一个进度指示器(加载圈)。我该如何实现呢?我正在使用masterpages
所以我想知道我是否可以在一个地方实现此代码以保持简单。这甚至可能吗?期待听到您的想法。
提前致谢。
我能够发展这个。我在答案中包含了这些步骤。如果您有疑问,请告诉我。
答案 0 :(得分:3)
我自己想出来了。
在Site.Master标记中包含以下内容:
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.blockUI.js"></script>
<script language="javascript" src="../Scripts/General.js" type="text/javascript"></script>
<style>
div.blockOverlay {
background-color: #666;
filter: alpha(opacity=50) !important;
-moz-opacity:.50;
opacity:.50;
z-index: 200000 !important;
}
div.blockPage {
z-index: 200001 !important;
position: fixed;
padding: 10px;
margin: -38px 0 0 -45px;
width: 70px;
height: 56px;
top: 50%;
left: 50%;
text-align: center;
cursor: wait;
background: url(ajax-loader.gif) center 30px no-repeat #fff;
border-radius: 5px;
color: #666;
box-shadow:0 0 25px rgba(0,0,0,.75);
font-weight: bold;
font-size: 15px;
border: 1px solid #ccc;
}
</style>
在default.aspx中添加以下标记:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate><asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" /></ContentTemplate>
</asp:UpdatePanel>
将进度指示器图像(ajax-loader.gif)添加到项目根目录
在General.js中添加以下内容
// BlockUI setup
$.extend({
// Block ui during ajax post back
initializeUiBlocking: function () {
if (typeof ($.blockUI) != 'undefined') {
$.blockUI.defaults.message = 'LOADING';
$.blockUI.defaults.overlayCSS = {};
$.blockUI.defaults.css = {};
var request = Sys.WebForms.PageRequestManager.getInstance();
request.add_initializeRequest(function (sender, args) {
request.get_isInAsyncPostBack() && args.set_cancel(true);
});
request.add_beginRequest(function () { $.blockUI(); });
request.add_endRequest(function () { $.unblockUI(); });
}
}
});
$(document).ready(function () {
$.initializeUiBlocking();
});
答案 1 :(得分:1)
看看这个
http://www.malsup.com/jquery/block/#overview
这适用于ajax调用。
您需要放置以下行
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
在所有页面可用的位置。
答案 2 :(得分:0)
<强>简介强>
要在提交数据时阻止页面,我们有各种选项,我们可以使用基于Ajax的UpdateProgress或一些jQuery Stuff。但有时由于复杂性,Ajax UpdateProgress不是很有用。因此,更好的approch适用于使用jQuery UI Block Plug-In。
实现:
从http://www.malsup.com/jquery/block/
下载jQuery UI Block Plugin<script type="text/javascript" src="js/jquery.1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
$("#<%= btnSubmit.ClientID%>").click(function() {
$.blockUI({
message: "<h3>Processing, Please Wait...</h3>" ,
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
} });
});
上面的代码是没有任何AJAX或其他复杂脚本的简单代码。
我在Website上找到了这篇文章并进行了测试,其工作正常