jQuery. blockUI 의 중국어 문서:
 
http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html     
 
프로젝트 에서 페이지 배경 을 변색 시 키 기 위해 단 추 를 누 르 고 미리 작성 한 div 같은 것 을 표시 하려 면 다음 문 구 를 사용 하 십시오 function show Category Form () {$. blockUI ({message: $('# why Form')}; (why Form 은 div 의 id) $('block Overlay'). 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:"

A message.

"
});
$.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:"

A message.

",
 
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 이 끝 날 때 호출 되 는 리 셋 방법 은 두 개의 인자 가 들 어 옵 니 다. unblocking 된 요소 (page block 은 window 대상) 와 unblock 에 호출 된 옵션: onUnblock (element, options);
onUnblock:null,
 
quirksmodeOffsetHack:4
};
 
BlockUI 옵션 을 바 꾸 는 것 은 상당히 간단 합 니 다. 다음 두 가지 방법:
1. $. blocUI. 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>