Jquery Block UI

Block  UI 介紹

甚麼是 BlockUI??

Block UI是一個相當古老的jQuery外掛，他可以產生燈箱的效果的外掛喔 !!!

為何要使用BlockUI???

會使用到block UI的時間

1.當資料在載入頁面或者是按下按鈕送出時，為避免使用者瘋狂亂按 而遮蔽的

2.侷限使用者使用的部分功能，有時候有些功能不想給使用者使用可以使用燈箱把那部份給鎖起來不讓使用者使用

以下是燈箱的寫法與一些屬性




$.blockUI.defaults = {
//顯示文字訊息
message:  '<h1>Please wait...</h1>',

title: null,   // 標題的文字有時用套板時
draggable: true,  // 拖曳.須加在 jQuery UI
//CSS設計
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
},

//主題的CSS
themedCSS: {
width: '30%',
top: '40%',
left: '35%'
},

//背景圖層
overlayCSS:  {
backgroundColor: '#000',
opacity:   0.6,
cursor:   'wait'
},

//樣式的運用
growlCSS: {
width:   '350px',
top: '10px',
left:   '',
right:   '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: 'default',
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px'
},

//IE讀取的問題
iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',

//修正IE的問題
forceIframe: false,

// z-index for the blocking overlay
baseZ: 1000,

// 如果都為true 就設定為置中
centerX: true, // <-- only effects element blocking (page block controlled via css above)
centerY: true,

//修正IE問題
allowBodyStretch: true,

//禁止滑鼠事件
bindEvents: true,

//鍵盤事件
constrainTabKey: true,

// 淡入
fadeIn:  200,

// 淡出
fadeOut:  400,

// 自動解鎖.單位為毫秒 0為手動解鎖 
timeout: 0,

 // 是否顯示覆蓋圖層
showOverlay: true,

// 是否設定滑鼠焦點
focusInput: true,

 // 淡入完成後執行 
applyPlatformOpacityRules: true,

  // 淡出執行
// onUnblock(element, options)
onUnblock: null,

// IE BUG 需要知道詳細請看: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
quirksmodeOffsetHack: 4
};