- 浏览: 291353 次
- 性别:
- 来自: 黑龙江
文章分类
- 全部博客 (151)
- 工具配置 (11)
- 前端技巧 (29)
- 分享 (4)
- action (1)
- ORM (2)
- mysql (17)
- html5 (1)
- java EE (1)
- 数据库理论 (5)
- 密码安全 (2)
- maven (7)
- java (14)
- linux (10)
- 电脑知识 (2)
- spring mvc (1)
- apache (2)
- php (2)
- 分布式 (1)
- memcache (2)
- ActiveMQ (1)
- jetty (2)
- foxmail拒信 (1)
- dos (1)
- eclipse (4)
- mybatis (2)
- tomcat (1)
- shell (0)
- Jmeter (3)
- windows (1)
- redis (6)
- StringUtils (1)
- svn (1)
- jsoup (2)
- zookeeper (3)
- log4j (3)
- git (3)
- solr (1)
- elasticsearch (1)
- 佛祖 (1)
- spring boot (2)
- openldap (0)
最新评论
-
boreas_baosj:
绑定多个事件的时候怎么传递参数呢???
jquery中的bind事件,详解,传参 -
sauzny:
usiboy 写道NIO确实可以提高Socket通讯上的效率, ...
Tomcat并发数优化的方法总结 -
usiboy:
NIO确实可以提高Socket通讯上的效率,但对于JVM的调优 ...
Tomcat并发数优化的方法总结
例子一:
<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" style="display:none; cursor:default">
<table style="text-align:right">
<tr>
<td colspan="2">用户名:<input id="txtUserName" type="text" /></td>
</tr>
<tr>
<td colspan="2">密码:<input id="Text1" type="text" /></td>
</tr>
<tr style="text-align:center">
<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();
});
<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" style="display:none; cursor:default">
<table style="text-align:right">
<tr>
<td colspan="2">用户名:<input id="txtUserName" type="text" /></td>
</tr>
<tr>
<td colspan="2">密码:<input id="Text1" type="text" /></td>
</tr>
<tr style="text-align:center">
<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();
});
发表评论
-
js中setInterval与setTimeout用法
2014-01-17 10:01 826setTimeout 定义和用法: setTime ... -
uploadify上传文件
2013-07-16 11:15 2345发现网上很多人写的都好像是旧的方法,好像已经过时了… ... -
js 正则验证
2013-01-16 14:25 943/判断输入内容是否为空 function IsNull() ... -
js对字符串的处理,以及验证
2013-01-16 14:06 1164JS自带函数concat将两个或多个字符的文本组合起来,返回一 ... -
Jquery中bind和live的区别
2012-11-28 13:35 3003Jquery中绑定事件有三种方法:以click事件为例 ... -
(MD)正则表达式中的特殊字符
2012-11-01 14:52 1824字符 含意 \ 做为 ... -
jquery ajax的参数详解
2012-10-31 13:00 1094参数名 类型 描述 ... -
JQUERY的父,子,兄弟节点查找方法
2012-10-31 11:00 44940jQuery.parent(expr) 找父亲节点,可以传入 ... -
jquery的md5插件
2012-10-20 18:24 1148(function($){ var rotate ... -
list-style功能:设置列表项目相关内容。
2012-10-16 15:32 987list-style功能:设置列表项目相关内容。 语法 ... -
JS父页面获取子页面返回值
2012-10-11 16:47 2855父页面<html><head> ... -
对textarea的内容进行详细监听(键盘+鼠标)
2012-09-27 17:56 1203$("#textarea").bin ... -
base64:URL背景图片与web页面性能优化
2012-09-26 18:07 2150一、base64百科 Base64是网络上最常见的用于传输8 ... -
word-wrap同break-word的区别
2012-09-23 15:09 995自动换行word-break:break-all和word-w ... -
jQuery中ajax中事件执行顺序
2012-09-18 10:51 9391.ajaxStart(全局事件) 2.beforeSend ... -
CSS2.0无图片实现圆角
2012-09-13 18:49 909CSS2.0无图片实现圆角 -
jquery中的ready和window的onload之间的“藕断丝连”
2012-09-10 03:00 850遇到了一个死循环,经高人指点,置之死地而后生~ -
textarea中的MaxLength属性在ie中失效问题
2012-09-09 17:18 1376代码解决 -
jquery弹出窗口锁屏代码
2012-09-09 17:17 1057还在改进中 -
json不能解读回车等字符引发的java与js编码和解码的问题
2012-09-09 17:16 1025编码问题 乱七八糟
相关推荐
使用jQuery.BlockUI非常简单,只需引入jQuery库和BlockUI插件的脚本文件,然后通过调用$.blockUI方法来启动弹出层。例如,可以这样创建一个简单的消息提示: ```javascript $.blockUI({ message: '请稍候...</h1>...
BlockUI 是一个 JavaScript 插件,它主要用于网页中的页面元素阻塞或锁定,通常用于创建弹出层或者浮动层效果。这个插件可以帮助开发者轻松地实现页面部分区域的加载动画,提示用户页面正在处理数据,避免用户在数据...
jQuery BlockUI 插件就是这样一个工具,它能轻松实现页面的“锁定”效果,创建出类似于弹出框的遮罩层,为用户提供直观的反馈。 **一、BlockUI 插件安装与引入** 首先,你需要在项目中引入 jQuery 和 BlockUI 插件...
通过自定义`message`参数,你可以使用Bootstrap的弹出框或者进度条来显示加载状态。 **总结** jQuery BlockUI 是一个强大的前端开发工具,它为开发者提供了便捷的页面锁定和解锁功能,确保在执行关键操作时用户...
在网页开发中,有时我们需要创建一个遮罩层或者弹出框来提示用户或者阻止用户与页面其他部分的交互,这就是“基于jQuery的BlockUI”插件所做的事情。BlockUI是一款非常实用的jQuery插件,它能够方便地实现页面区域的...
在标题和描述中提到的“11个jQuery弹出层插件”,我们将探讨这些插件的特点、应用场景以及如何使用它们。 1. **jQuery UI Dialog** jQuery UI 提供了一个高度可定制的Dialog组件,可以用来创建模态或非模态对话框...
总结起来,"jquery插件弹出div"是一个利用jQuery库实现的交互功能,它通过"blockUI"这样的插件提供了弹出式对话框或者模态框,增强了用户的交互体验。理解并掌握这类插件的使用,对于提升网页应用的用户体验和开发...
总的来说,jQuery BlockUI插件提供了一种灵活且易于使用的机制,可以在网页中实现丰富的弹出层功能。通过调整配置参数,你可以轻松定制弹出层的外观和行为,满足各种交互设计需求。无论是在处理异步请求、显示提示...
总的来说,使用jQuery和blockUI插件实现一个带遮罩层效果的弹出层是一项非常实用的技术,它可以帮助开发者提升用户的操作体验,尤其是在需要进行长时间操作或等待响应时。通过上述方法,开发者可以轻松地将这类交互...
在实际应用中,"blickui-弹出层插件"的使用方法可能包括以下步骤:引入jQuery和插件的JavaScript及CSS文件,通过jQuery选择器找到要添加弹出层的元素,然后调用插件提供的方法来设置和控制弹出层的显示、隐藏、动画...
在上面的例子中,当用户点击ID为`myButton`的按钮时,会弹出一个显示“请稍后”的遮罩层,阻止用户对页面的其他操作。 三、高级配置 jQuery.blockUI提供了丰富的配置选项,允许开发者自定义遮罩层的样式、动画效果...
在描述中提到的链接是CSDN博主evangel_z的一篇博客文章,详细介绍了如何使用jQuery BlockUI插件。通过这篇文章,我们可以了解到该插件的基本用法和一些高级特性。 首先,要使用jQuery BlockUI,你需要在页面中引入...
除了BlockUI,还有其他jQuery遮罩插件可供选择,如`jQuery Masked Input Plugin`,主要用于输入框的格式化,不适用于全局遮罩,或者`jQuery UI Dialog`,可以创建弹出对话框并带有遮罩效果。 ### 七、总结 jQuery...
JQuery是一款基于JQuery的弹出层插件,它不仅可以为网页设计提供美观的弹出层效果,还可以支持iframe和模式窗口,这意味着开发者可以利用它来创建模态对话框、信息提示框等多种交互界面。尽管它的功能比较丰富,但它...
接下来,你可以使用 jQuery 选择器结合 BlockUI 的方法来调用插件。以下是一些基本的调用示例: 1. 锁定整个页面: ```javascript $.blockUI({ message: '请稍等,正在加载数据...', overlayCSS: { ...
2. 引导用户注意力:在弹出对话框或执行关键操作时,遮罩层可以防止用户误触背景内容。 3. 创建模态效果:遮罩层配合弹窗使用,形成模态对话框,使用户必须处理当前窗口后再继续操作。 接下来,我们逐一解析这四种...