> jQuery BlockUI轻松实现锁屏
jQuery BlockUI轻松实现锁屏
&&&&&&& 当我们在前端通过ajax调用后台的时候,由于数据量各有不同,可能会造成长时间的等待,但此时等待的用户仍然可以操作界面上的其他元素,例如重新点击一个按钮,这种情况是不被允许的.或者有时候需要执行某些操作后,对用户界面进行锁屏,经过一段时间后重新恢复,此时当然会想到在页面上增加一层div来进行遮挡,但jQuery的BlockUI已经帮你完成了这样的工作,我们可以通过简单的js代码来达到各种各样的效果
jQuery BlockUI使用:
&&& 通过以下地址可以访问BlockUI的官网,上面有众多的Demo可供参考
&&& 首先当然是要引入blockUI,以下Demo就使用1.6
&script&type=&text/javascript&&src=&jquery-1.6.1.min.js&&&/script& &&script&type=&text/javascript&&src=&jquery-block-ui.js&&&/script&&
$(function(){ &&&&&&&&&&&&&&&$.blockUI({ &&&&&&&&&message:&hello&world&; &&&&&}) &}) &
$(function(){&& &&&&&&&&&&&&&&&&&&$.blockUI({&css&:&{ &&&&&&&&&&&&&border&:&&none&,&& &&&&&&&&&&&&&padding&:&&15px&,&& &&&&&&&&&&&&&backgroundColor&:&&#000&,&& &&&&&&&&&&&&&&-webkit-border-radius&&:&&10px&,&& &&&&&&&&&&&&&&-moz-border-radius&&:&&10px&,&& &&&&&&&&&&&&&opacity&:&.5,&& &&&&&&&&&&&&&color&:&&#fff&&& &&&&&&&&&}})&& &&&&&}) &&
$(function(){ &&&&&&&&&&&&&$.blockUI({ &&&&&&&&&message&:&$(&#loginForm&) &&&&&}) &&&&&&&&&&setTimeout($.unblockUI,2000); &})& &
$(function(){ &&&&&&&&&$.blockUI(); &&&&&&&&& &&&&&&&&&setTimeout(function(){ &&&&&&&&&&&&&$.unblockUI({ &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&onUnblock&:&function(){ &&&&&&&&&&&&&&&&&&&&&alert(&onUnblockUI&); &&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&}) &&&&&&&&&},2000); &&&&&}); &&
$(function(){ &&&&&&&&&$.blockUI({ &&&&&&&&&&&&&&&&&&&&&&&&&&onOverlayClick&:&$.unblockUI &&&&&&&&&}); &&&&&}); &&
$(function(){ &&&&&&&&&&&&&&&&&&$(document).ajaxStart(function&()&{ &&&&&&&&&&&&&blocks(); &&&&&&&&&}); &&&&&&&&& &&&&&&&&&&&&&&&&&&$(document).ajaxStop(function&()&{ &&&&&&&&&&&&&$.unblockUI(); &&&&&&&&&}); &&&&&}); &&
&&& 使用BlockUI只需要编写少量代码就能实现轻松方便的锁屏和解锁,还可以设置自定义的样式去控制BlcokUI样式的显示,作为jQueryUI的小工具,极其易学和使用方便
本文地址 ：
------分隔线----------------------------Jquery的blockUI应用 - Web前端当前位置:& &&&Jquery的blockUI应用Jquery的blockUI应用&&网友分享于：&&浏览：40次Jquery的blockUI使用
1.首先要准备好关于jquery的js文件& 包括jquery-1.2.3.js和jquery.blockUI.js2.在前台JSP页面中调用Jquery
&%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&base href="&%=basePath%&"&
&title&My JSP 'JqueryShowBlock.jsp' starting page&/title&
&meta http-equiv="pragma" content="no-cache"&
&meta http-equiv="cache-control" content="no-cache"&
&meta http-equiv="expires" content="0"&
&meta http-equiv="keywords" content="keyword1,keyword2,keyword3"&
&meta http-equiv="description" content="This is my page"&
&link rel="stylesheet" type="text/css" href="styles.css"&
&script language="JavaScript" type="text/javascript"
src="&%=path %&/jquery/jquery-1.2.3.js"&&/script&
&script type="text/javascript" src="&%=path %&/jquery/jquery.blockUI.js"&&/script&
&script language="JavaScript"&
function showBlock(){
jQuery.blockUI({ message: "处理中，请稍候...", css: {color:'#fff',border:'3px solid #aaa',backgroundColor:'#CC3300'},overlayCSS: { opacity:'0.0' }});
setTimeout('hideBlock()',2000);//2000毫秒后调用hideBlock()
function hideBlock(){
jQuery.unblockUI();
This is my JSP page. &br&
ShowJqueryBlock Start:&input type="button" id="showBlock" value="ShowBlock" onclick="showBlock()"/&&br/&
关于jquery文件的目录结构如下：---WebRoot--------jquery-----------jquery-1.2.3.js-----------jquery.blockUI.js3.页面执行结果如下：当点击"ShowBlock"按钮时会调用jquery的jQuery.blockUI方法，"处理中，请稍后..."的jquery的block信息会显示，并且将页面锁定；过2000毫秒后调用jQuery.unblockUI()将jquery的block信息取消。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有求助：jquery BlockUI 弹出层问题
[问题点数：80分，结帖人Devil_cpp]
求助：jquery BlockUI 弹出层问题
[问题点数：80分，结帖人Devil_cpp]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。
　　blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏，可以在blockUI方法中指定一些参数，来控制弹出层显示的内容，大小，位置等。blockUI方法的常用的参数有：message,css,overlayCSS,showOverlay。
　　message：主要用来设置要显示的内容，可以直接设置为一段文字，html代码或者使用jquery获取页面上隐藏的div。
　　css：主要用来设置弹出层的样式，包括弹出层的位置，大小，边框等。
　　overlayCSS：主要用来设置遮罩层的样式，包括背景色，透明度等。
　　showOverlay：主要用来设置是否显示遮罩层，如果要隐藏遮罩层可以设置为false。
　　下面通过一些例子来看看具体的用法，在页面导入jquery.min.js和jquery.blockui.js文件，具体实现代码如下：
$(&#btnSubmit&).click(function () {
$.blockUI({
message: $(&#loginForm&),
width: '300px',
height: '300px',
left: ($(window).width() - 300) / 2 + 'px',
top: ($(window).height() - 300) / 2 + 'px',
border: 'none'
$(&#btnLogin&).click(function () {
$.blockUI({
message: &&h2&正在登录，请稍候……&/h2&&,
border: '1px solid black'
setTimeout(function () { $.unblockUI() }, 1000);
$(&#btnCancel&).click(function () {
$.unblockUI();
对应的html代码为：
&div id=&loginForm& style=&display:none&&
&td&用户名：&/td&
&td&&input id=&txtUserName& type=&text& /&&/td&
&td&密　码：&/td&
&td&&input id=&txtPwd& type=&text& /&&/td&
&td&&input id=&btnLogin& type=&button& value=&登录& /&&/td&
&td&&input id=&btnCancel& type=&button& value=&取消& /&&/td&
我们使用热门的jquery进行设计，同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料，请参照张鑫旭博客/wordpress/?p=318)。下面介绍boxy作为选择器框架的应用。
　　对于选择器，相信用过招聘网站的人都不会陌生(就是那个点击就弹出的，选择行业、职位和地区的东西)，选择器难点就在于样式调试，主要针对的是IE
可以一个页面中创建多个弹出窗，被选中的弹出窗会加亮显示，在同一网页中可以有多个弹出窗口，也可以通过双击窗口实现最大化，跟windows像极了。如果想要做一个类似操作系统的页面，用这个插件是完全可以实现的。兼容多种主流浏览器。
最基础的调用方法：
$('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',));
代码如下：
(function ($) { var imgdir = 'images/';//图片文件夹路径 var autoHide=//悬浮div是否自动隐藏 var hideType='hide';//隐藏的方式 可选参数 hide、slide、fade var hideDelay=0;//悬浮div隐藏过程使用的时间 var hideTime=0;//悬浮
之前做一个项目，感觉里面的弹出层做的挺好，但是代码结构有问题，这次用到了，重构了一下，改成jQuery的插件形式，并增加了reLoad的功能，感觉还不错，代码如下：
(function($){ $.module={ _showCoverLayer:function(){//显示遮盖层 this.coverLayer=$(&#TB_overlay&); va
JQuery插件fancybox解决无法在弹出层使用左右键的问题。无法使用的原因在于，插件接管了左右键，用于多张图片的翻页。 如果不需要这个功能，可以在fancybox插件中，禁止接管就好了。 具体在插件下的js文件 jquery.fancybox-1.3.4.js 中的598行，注释掉就好了。 // _set_navigation();
想着自己学习Javascript，以及Ajax、jQuery等已经有一段时间了，不过貌似还没有写过一个插件，看到jQuery官网上那么多令人眼前一亮的插件，自己今天也动心说是不是能够写一个类似的插件来瞧瞧，了解了jQuery插件的基本格式，理一下基本的思路，动工吧。。。 　　这个DivAlert插件，顾名思义就是页面弹出框，也就相当于Winform里面MessageBox.Show()那样的东西。
.THICKBOX支持一下浏览器: Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10……但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用: 1.肯定你先要
最终效果：
&!DOCTYPE html& &html& &head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8&/& &title&弹出层插件:jquery.artwl.thickbox
弹出层在实际应用中我们经常会碰到大量的弹出层效果，下面我来做一个基于jquery的简单的弹出层效果实例，各位朋友有兴趣可参考。 效果代码如下： 在 弹出层 中下面是核心代码
&script type=&text/javascript&& // 渐变弹出层 $(document).ready(function(){ var speed
此Jquery特效是一款Jquery+CSS3实现简洁大气带滑动效果的弹出层，应用范围很广泛，比如用在消息提示、弹出层显示内容、弹出层登录等，带遮罩效果，虽然没有封装成插件，但使用起来也非常简单，宽度和高度直接调样式。
包含了以下功能： 1、弹出层 2、带关闭按钮 3、遮罩层效果 4、从上向下滑动显示 5、点击层外面任何地方关闭 6、绑定控制按钮 7、内容过多自动显示滚动条
如果不满足大家的
运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
经过几多周折，终于搞出来了，效果图如下：
具体实现： (1) 编写 jquery.divbox.js 的代码：
jQuery.fn.extend( { OpenDiv: function() { var sWidth, sH sWidth = window.screen.availW if (window.screen.availHeight &gt
&!--弹出层的显示与隐藏--& &script type=&text/javascript&& //弹出层的显示 //overlays:为遮罩层的ID //wins:弹出层窗体的ID //弹出层中用于拖动的ID function popDIV_show(overlays,wins,wins_title) { var oLays = do
此Jquery插件是一款非常实用的特效，是很多网站不可缺少的推广神兵利器，传统的一般都用百度、加网的分享插件，但样式外观都不怎么好看，用户体验效果差一点，此作品不但有分享功能，还具备了动画效果，提高了用户体验。由于用了CSS3，为了可以看到插件的最佳效果，建议大家使用谷歌、火狐等浏览器。。。
作品包括以下功能： 1、弹出层 2、遮罩层 3、动画效果 4、CSS3
效果如下：
使用该jQuery插件 要想使用该jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的&selector&，例如：&a[rel=boxy],form.with-confirmation&。这会给匹配的元素附加一些行为，如下：
一个href属性中如果锚点包含#，则此锚点相对应的ID
&script language=&javascript& src=&jquery-1.4.2.min.js&&&/script& &script& function show(obj,id) { var objDiv = $(&#&+id+&&); $(objDiv
//--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask
本浮动层基于jQuery1.6.2,对于研究1.6版本的jquery很有帮助意义。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html
首先还是来看一下运行效果如图1所示。
该插件使用步骤 一、引入css文件 首先页面引入css样式文件‘votecss.css'，他是投票结果正常显示必不可少的。具体代码如下所示： &link href=&startpic/votecss.css& rel=&stylesheet& type=&text/css& /& 二
当你需要使用弹出框时，当然可以使用jquery-ui,artdiag,blockUI等等，但今天我介绍一个轻量级的插件 boxy!它可以把美工设计的弹出框很容易的体现出来，而且兼容性还不错！
&script type='text/javascript'& $(function() { $('#ask-actuator').click(function() { Bo
基于jquery的锁定弹出层 这个东西也是随手总结出来的，引用了一些js框架jquery的方法。 div遮盖其他控件的方法参考了 对于需要遮盖flash的，请将flash控件的WMode变量值设置为Transparent 使用方法：
&script src=&jquery.js&&&/script& &script src=&
前不久在官方网站是看见这个插件，所以今天趁有空就看了一下，随便给大家共享一下。也许你早已知道了
，如果是这样那请跳过，不要拍砖。
这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有
如下这些特点：
1：这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。
2：允许你自定义对话框的标题。
String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,&gm&),s2); }; (function($){ /* * $-layer 0.1 - jquery pulg-in * * Copyright (c) 2008 King Wong
Sticky是一个简单的 页面消息提醒jQuery插件。可以设置让 消息在页面的四个角落出现，也可以设置在 页面中央出现。可以 手动关闭消息，也可以设置成 自动关闭。
2)JNotify是一个 JQuery插件，基于 JQuery UI实现，用于创建
原理很简单，通过JS动态构建一个div层，将其插入到body中，然后通过调整position的CSS属性为absolute或fixed，使其脱离原来的文档流的位置。再通过适当的加工美化就成了。
&!-- 背景遮盖层 --& &div class=&dialog-overlay&&&/div&
&!-- 对话框 -
1.$.messager.lays(width, height); 该方法主要用来定义弹出窗口的宽度和高度。 2.$.messager.anim(type,speed); 该方法主要定义窗口以什么样的方式和速度呈现。 $.messager.anim(&fade&,1000); //以fadeIn的动画方式显示 $.messager.anim(&show&,1
大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。
但是这些弹出来的窗口的样式非常的单调无法设置，并且窗口标题还根据不同的浏览器显示不同的标题内容，非常的丑陋！对于高审美观的现代人来说，就大打折扣了！
jQuery现在这么流行、这么火，但网上却好像还是没有提供类似于MessageBox的插件（或者只是我没有找到而已），类似的模式窗口插件倒是有一大堆，但这都不是我想要的。没现成的，就只好花点时间将我以前写的基
前边也讲过一个基于java的图形报表，功能及外观也不错，但存在通用性的问题。所以我们来学一个具有易用性+兼容性+可扩展性的js图表插件。
jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且，jqPlot具有插件可扩展性(Pluggability)，你可以编写自己的图表样式。
官方地址： http://www.jqplot.
本示例使用Jquery的ColorBox插件弹出图片组浏览层。效果预览网址：/keleyi/phtml/colorbox/
以下是本效果的完整代码，将以下代码保存到html文件，打开即可预览效果。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//E
简单使用方法：
&html& &head& &title&JQuery-Cookie插件&/title& &script type=&text/javascript& src=&jquery-1.4.js&&&/script& &script type=&qu
功能：zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog，该插件对背景进行遮罩，然后弹出信息显示框，信息显示种类包括： 一、信息种类说明： 1.1、操作成功信息
1.2、错误信息
1.3、警告信息
1.4、通知信息
二、使用说明
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.
jquery实现弹出层完美居中效果
showDiv($(&#pop&)); function showDiv(obj){ $(obj).show(); center(obj); $(window).scroll(function(){
center(obj); }); $(window
开发网站少不了要经常用弹出窗口的形式，今天在网上搜了个小插件LeanModal，记录于此，方便自己，亦方便他人使用。
此插件是个老外写的，体积小是它最大的优点，压缩后1k不到。当然，此插件是寄生于JQuery上.
一. 效果图
二.使用步骤：
　　1.引用Jquery.js和leanModal.min.js
&script src=&Javascr
在开发应用中我们做了一个弹出层，有时我们会做一个关闭按钮，这样点击关闭就可以把弹出层关闭了，但是有时希望只要不点击弹出层内就自动关闭弹出层了，下面我总结了三个实例。例1
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xh
点击弹出层外区域关闭弹出层jquery特效,废话不说，上代码，简洁明了：
&html& &head& &style& .hide{display:} .con{width:500height:300background:#000;} &/style& &title&点击弹出层 ，点击弹出层外区域
本?丝最近工作要求重写网站所有代码，so...极其蛋疼的事情出现了，管我的人要求不能用网上的插件，oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~
先实现一个比较简单的功能：
需求：网页遮罩层/弹出层，兼容IE6
幸好本?丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。
屁话不多放，无码无真相！
//显示遮罩 $.blockUI({ message: $('#divlogin'), css:{width:&400px&, height:&255px&, top: ($(window).height() - 400) /2 + 'px', left: ($(window).width() - 400) /2 + 'px'} }); //
上一章我介绍了遮罩的页面可增加部分区域编辑模块，这章将介绍父页面显示遮罩层，弹出半透明状态的dialog。dialog即弹出的子页面，div。
效果图如下：
具体代码实现如下：
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.0 Transitional//EN&& &HTML&
1、下载并修改插件 可以在官网上下载到最新版(/files/boxy-0.1.4.zip)，到我写这些文字的时候最新版为0.1.4版，下载解压后有1个主要的js文件：jquery.boxy.1个css文件;还有4个图片用于构成弹出层的4个圆角。将文件引入系统中，修改boxy.css，将下面的图片路径修改为项目中实际的位置，如果设置不对会引起图jQuery blockUI首页、文档和下载 - jQuery高级页面组件 - 开源中国社区
当前访客身份：游客 [
当前位置：
jQuery blockUI
这个jQuery插件能够为页面上的任意元素添加遮层，阻止用户操作。具体可以用于制作提示等待响应的对话框。当要执行某个较长操作时候，通过 blockUI来阻止当前用户继续操作。
授权协议：
开发语言：
操作系统：&跨平台&
收录时间：
VVL 发表于3个月前
使用 jQuery blockUI 中的任何问题
共有 139 个类似软件
jQuery Raty这是一个能够自动生成可定制的星级评分jQuery插件。可以自定义图标，创...
noty 是一个很有用的 jQuery 插件，用于创建 alert, success, error and confirma...
Meerkat是一个jQuery插件用于在页面的底部和顶部创建一个固定的横幅。横幅的关闭有...
Activebar2是一个横跨整个浏览器，紧靠顶部的消息通知条。这种消息通知提醒方式更能...
LoadMask jQuery插件用于当DOM元素加载或变化期间，对其进行遮挡阻止用户操作并告...
ddSlick 是一个轻量级的 jQuery 插件用来实现定制的下拉组件。 主要特点： Adds i...
Hovercard 是一个 jQuery 插件，你可以轻松的在弹出层中显示文本、链接或者其他任何...
jRating 是一款非常灵活的评分插件。 在线演示：/...
jqcloud是一个 jQuery 标签云的插件，如下图所示： 示例代码：
共有 38 人关注 jQuery blockUI