JQuery Block UI V2

最新推荐文章于 2023-08-17 14:34:01 发布

zwt2001267

最新推荐文章于 2023-08-17 14:34:01 发布

阅读量107

点赞数

文章标签： UI jQuery CSS JavaScript IE ViewUI

本文链接：https://blog.csdn.net/zwt2001267/article/details/83771154

版权

jQuery.blockUI的中文文档:

http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html

如果在项目中你想要点击一个按钮使得页面背景变色然后你事先写好的div什么的显示就可以用以下语句
function showCategoryForm(){
$.blockUI({message:$('#whyForm')});（whyForm是div的id）
$('.blockOverlay').click($.unblockUI);
}
下面的语句是页面恢复：
function unblock(){
$.unblockUI();
}
记得在使用这个插件的时候注意要引入两个js文件
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.blockUI.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.3.2.min.js"></script>

--------------------------------------------------------------------------------------------------

jQuery BlockUI插件让你在不锁定浏览器的情况下使用Ajax时模拟同步行为。当被激活的时候，它会阻

止用户的行为直到它无效。BlockUI将元素添加到DOM中，并赋予外观和阻止用户动作的行为。

用法非常简单：

1、to block user activity for the page：

$.blockUI();

2、blocking with a custom message：

$.blockUI({

message:"A customer message."

});

3、blocking with custom style：

$.blockUI({

css:{

backgroundColor:"",

color:""

}

});

4、to unblock the page：

$.unblockUI();

如果你想使用默认设置和have the UI blocked for all requests：

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

Page Blocking

$.blockUI();

$.blockUI({

message:"<h1>A message.</h1>"

});

$.blockUI({

css:{

backgroundColor:"",

color:""

}

});

$.blockUI({

message:$("#domMessage")

});

Element Blocking

$("div").block({

message:null

});

$("div").block({

message:null,

css:{

border:"1px solid #a00"

}

});

$("div").unblock();

Modal Dislogs

Options

通过在你的代码重写这些来改变默认行为和样式

$.blockUI.defaults={

当blocking时显示的信息，如果使用null则不显示任何信息

message:"<h1>A message.</h1>",

当blocking时信息的样式，如果你想禁用这些并且使用一个外部样式，可以这么做：

$.blockUI.defaults.css={};

css:{

padding:0,

margin:0,

width:"30%",

top:"40%",

left:"35%",

textAlign:"center",

color:"#000",

border:"3px solid #aaa",

backgroundColor:"#fff",

cursor:"wait"

覆盖层样式

overlayCss:{

backgroundColor:"#000",

opacity:0.6

当使用$.growlUI时应用的样式

growlCSS:{

width:"350px",

top:"10px",

left:"",

right:"10px",

border:"none",

padding:5px,

opacity:0.6,

cursor:null,

color:"#fff",

backgroundColor:"#000",

"-webkit-border-radius":"10px",

"-moz-border-radius":"10px"

IE问题："about:blank" fails on HTTPS and javascript:false is s-l-o-w

iframeSrc:/^https/i.test(window.location.href||"")?"javascript:false":"about:blank",

在非IE浏览器中强制使用iframe(handy for blocking applets)

forceIframe:false,

覆盖层的z-index基值

baseZ:1000,

将信息显示在中间，centerX只有在element blocking时才有效，而page blocking是通过CSS来控制的

centerX:true,

centerY:true,

在IE6下允许body元素被拉伸，将会使block看起来更好一些，如果你想禁止改变高度可以将其禁用

allowBodyStretch:true,

block内容的键或鼠标事件将被禁用

bindEvents:true,

默认情况下，blockUI将会抑制tab导航到block的内容之外（在bindEvents为true的情况下）

constrainTabKey:true,

fadeIn时间，单位为毫秒，在block的时候设置为0将会禁用

fadeIn:200

fadeOut时间，单位为毫秒，在unblock的时候设置为0会禁用

fadeOut:400,

在auto-unblocking之前等待的时间，单位为毫秒，设置为0将会禁用auto-unblocking

timeout:0,

如果你不想显示覆盖层可以将其禁用

showOverlay:true,

在page blocking时，如果为true将会把焦点放在第一个可用的输入域中

focusInput:true,

在Firefox/Linux平台上抑制覆盖层样式的使用（由于opacity导致的性能问题）

applyPlatformOpacityRules:true,

当unblocking结束时调用的回调方法，有两个参数被传入：已经被unblocked的元素（page block是window对象）和被传到unblock调用的选项：onUnblock(element,options);

onUnblock:null,

quirksmodeOffsetHack:4

};

改变blockUI的选项相当简单，以下两种方式：

1、直接覆盖$.blockUI.defaults对象：$.blockUI.defaults.css.border="";

2、传一个选项对象到blockUI或block函数中：

$.unblockUI({

message:""

});

--------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language=javascript src="js/jquery-1.3.2.js"></script>
<script language=javascript src="js/jquery.blockUI.js"></script>
<script language=javascript>
$(function(){
   //检测引入的jquery.js是否正确。
   //alert("jquery 没有问题！");
   //默认样式
   var a1 = $("a:eq(0)");
   a1.click(function(){
    a1.css("color","green");
    $.blockUI();
   });
   //自定义内容
   var a2 = $("a:eq(1)");
   a2.click(function(){
    $.blockUI({message:'正在处理，请等待...'});
   });
   //自定义样式
   var a3 = $("a:eq(2)");
   a3.click(function(){
    $.blockUI({ css: { 
     border:'solid green 2px',
     backgroundColor:'blue'
     }
    }); 
   });
  
   //蓝色背景
   var a4 = $("a:eq(3)");
   a4.click(function(){
    $.blockUI({
     overlayCSS:{backgroundColor:'blue'},
     message:'正在处理，请等待。。。',
     css:{
      backgroundColor:'#F0FF00',
      height:40
     }
     });
   });
   //停滞2秒
   var a5 = $("a:eq(4)");
   a5.click(function(){
    $.blockUI({message:'Processing...'});
    setTimeout($.unblockUI,2000);
   });

   //防止一个表单
   var a6 = $("a:eq(5)");
   a6.click(function(){
    $.blockUI({message:$('#loginForm')});
	//$.growlUI({message:$('#loginForm')});
   });

   //通知（Notification）
   var a7 = $("a:eq(6)");
   a7.click(function(){
    $.growlUI('Hi','Have a nice day!');
   });

   //onBlock callback
   a8 = $("a:eq(7)");
   a8.click(function(){
    $.blockUI({ 
            fadeIn: 1000, 
            timeout: 2000, 
            onBlock: function() { 
                alert('Page is now blocked; fadeIn complete'); 
            } 
    }); 
   });

   //Theme
   var a9 = $("a:last");
   a9.click(function(){
    $.blockUI(
     {
      theme:true,
      title:'<p style="font-size:25px">This is your title<p>',
      message:'<p style="font-size:22px;background-color:green;">This is your message.</p>',
      timeout:2000
     }
     ); 
   });
});

</script>
</HEAD>

<BODY>
<a href="#">DEFAULT</a>
<a href="#">自定义内容</a>
<a href="#">自定义样式</a>
    <a href="#">蓝色背景</a>
<a href="#">停滞2秒</a>
<a href="#">放置一个表单</a>
<a href="#">通知（Notification）</a>
<a href="#">onBlock callback</a>
<a href="#">Theme</a>

<div id="login" style="display:none">
   <form action="#" id="loginForm">
    <table>
     <thead>
      <th>用户登录</th>
     </thead>
     <tr>
      <td>用户名：</td>
      <td><input type="text" name="name"></td>
     </tr>
     <tr>
      <td>密码：</td>
      <td><input type="password" name="pwd"></td>
     </tr>
     <tr align="center">
      <td colspan="2">
       <input type="submit" value="登录"/>
      </td>
     </tr>
    </table>
   </form>
</div>
</BODY>
</HTML>

zwt2001267

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery Block UI V2

jQuery.blockUI的中文文档: http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html 如果在项目中你想要点击一个按钮使得页面背景变色然后你事先写好的div什么的显示就可以用以下语句function showCategoryForm(){$.blockUI({message...
复制链接

扫一扫