设为首页 加入收藏

TOP

jQuery弹出层BlockUI的用法(包括登陆界面)(一)
2014-11-24 14:39:14 来源: 作者: 【 】 浏览:20
Tags:jQuery BlockUI 用法 包括 登陆 界面

例子一:




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














例子二:




<script type="text/java script" src="Scripts/jquery-1.4.1.js">
<script type="text/java script" src="Scripts/jquery.blockUI.js">
<script type="text/java script">
$(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 type="text/java script" src="Scripts/jquery-1.4.1.js">
<script type="text/java script" src="Scripts/jquery.blockUI.js">
<script type="text/java script">
$(document).ready(function () {
$('#btnOpen').click(function () {
$.blockUI({
message: '',
css: {
border: 'none', // 无边界
width:"20px", // 中间框框的宽度
top:"50%", // 高居中
left:"50%" // 左居中
}
});
setTimeout($.unblockUI, 2000);
});
});













例子四:



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


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


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















例子五:


// 当有ajax请求时,当加载信息较慢时,会显示该等待图片,带来良好的用户体验
$(document).ajaxStart(function () {
$.blockUI({
message: '',
css: {
width: "20px", // 宽度小一点
top: "50%",
left: "50%"
}
});
});


$(document).ajaxStop(function () {

首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇jQuery倒数计时按钮—setTimeout 下一篇jQuery中的cookie使用方法

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: