jQuery BlockUI
2010年2月9日
13:25
Overview
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:""
});