歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> jQuery彈出層BlockUI的用法(包括登陸界面)

jQuery彈出層BlockUI的用法(包括登陸界面)

日期:2017/3/1 10:34:24   编辑:Linux編程

例子一:

<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI();
setTimeout($.unblockUI, 2000);
});
});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnOpen" type="button" value="Open" />
</div>
</form>
</body>
</html>

例子二:

<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message:"請稍候",
css: {
border: 'none',
padding: '15px',
backgroundColor: 'yellow',
width:"300px",
opacity: .5,
color: 'Red'
}
});
setTimeout($.unblockUI, 2000);
});
});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnOpen" type="button" value="Open" />
</div>
</form>
</body>
</html>

例子三:

<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message: '<image src="images/wait.gif"></image>',
css: {
border: 'none', // 無邊界
width:"20px", // 中間框框的寬度
top:"50%", // 高居中
left:"50%" // 左居中
}
});
setTimeout($.unblockUI, 2000);
});
});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnOpen" type="button" value="Open"/>
</div>
</form>
</body>
</html>

例子四:

<head runat="server">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message: $('#loginForm')
});
});

$('#btnReset').click(function () {
$.unblockUI();
});

$('#btnLogin').click(function () {
location.href ="default.aspx";
});
});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnOpen" type="button" value="Open"/>
<div id="loginForm" >
<table >
<tr>
<td colspan="2">用戶名:<input id="txtUserName" type="text" /></td>
</tr>
<tr>
<td colspan="2">密碼:<input id="Text1" type="text" /></td>
</tr>
<tr >
<td>
<asp:Button ID="btnLogin" runat="server" Text="登陸" />
</td>
<td>
<input id="btnReset" type="reset" value="取消登陸" />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>

例子五:

// 當有ajax請求時,當加載信息較慢時,會顯示該等待圖片,帶來良好的用戶體驗
$(document).ajaxStart(function () {
$.blockUI({
message: '<image src="images/wait.gif"></image>',
css: {
width: "20px", // 寬度小一點
top: "50%",
left: "50%"
}
});
});

$(document).ajaxStop(function () {
// 直接調用,無延時
$.unblockUI();
});

Copyright © Linux教程網 All Rights Reserved