弹出层之2：JQuery.BlockUI
生活随笔
收集整理的這篇文章主要介紹了
弹出层之2：JQuery.BlockUI
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JQuery.BlockUI是眾多JQuery插件彈出層中的一個，它小巧（原版16k，壓縮后10左右）,容易使用, 功能齊全，支持Iframe，支持Modal，可定制性高也意味他默認謙虛的外表。
jQuery的BlockUI插件可以讓你在使用AJAX時模擬同步行為，鎖定瀏覽器(模式窗口)。當被激活時，它會防止用戶活動的頁面（或頁面的一部分），直到它被禁用。 BlockUI添加元素的DOM，給它的外觀和阻止用戶交互行為。
1、首先引入插件
????<script?src="jquery.min.js"?type="text/javascript"></script>????<script?src="JQuery.BlockUI.min.2.39.js"?type="text/javascript"></script>
2、調用
?
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html?xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
????<script?src="jquery.min.js"?type="text/javascript"></script>
????<script?src="JQuery.BlockUI.min.2.39.js"?type="text/javascript"></script>
????<script?type="text/javascript">
????????$(function()?{
????????????$('#Button1').click(function()?{
????????????????//阻止頁面的用戶的活動
????????????????$.blockUI();
????????????});
????????????$('#Button2').click(function()?{
????????????????//自定義信息內容
????????????????$.blockUI({?message:?'<h3><img?src="busy.gif"?/>?Just?a?moment...</h3>'?});
????????????});
????????????$('#Button3').click(function()?{
????????????????//自定義樣式
????????????????$.blockUI({?css:?{?backgroundColor:?'#f00',?color:?'#fff'}?});
????????????});
????????????$('#Button4').click(function()?{
????????????????//定義彈出的信息為頁面的某一個元素
????????????????$.blockUI({?message:?$('#domMessage')?});
????????????});
????????????$('#btnClose').click(function()?{
????????????????//關閉彈出層
????????????????$.unblockUI();
????????????});
????????????$('#Button5').click(function()?{
????????????????//設置淡入，淡出，自動關閉時間
????????????????$.blockUI({?fadeIn:?700,?fadeOut:?700,?timeout:?2000?});
????????????});
????????????//簡單的氣泡提示
????????????$.growlUI('提示',?'刪除成功!');
????????});
????</script>
</head>
<body>
????<ol>
????????<li>阻止頁面的用戶的活動,不會自動消失，請刷新：?$.blockUI();
????????????<input?id="Button1"?type="button"?value="測試"?/>
????????</li>
????????<li>自定義消息：
????????????<input?id="Button2"?type="button"?value="測試"?/>
????????</li>
????????<li>自定義樣式：
????????????<input?id="Button3"?type="button"?value="測試"?/>
????????</li>
????????<li>彈出指定的元素，并關閉彈出層(該層可以為隱藏)：
????????????<input?id="Button4"?type="button"?value="測試"?/>
????????</li>
????????<li>設置淡入，淡出，自動關閉時間：
????????????<input?id="Button5"?type="button"?value="測試"?/>
????????</li>
????</ol>
????<div?id="domMessage"?style="text-align:?center;?width:?200px;?height:?50px;?border;
????????1px?solid?#9cf;?padding:?25px;?display:?none;">
????????<h3>
????????????Message</h3>
????????<input?id="btnClose"?type="button"?value="關閉"?/>
????</div>
</body>
</html>
?
3、樣式修改
jQuery blockUI 提供的默認樣式過于樸素, 可以在每一次調用blockUI() 函數時進行修改. 也一次直接修改庫文件 jquery.blockUI.js, 修改$.blockUI.defaults 對象相關的代碼：
?
顯示源碼 //?重寫defaults對象中的屬性????$.blockUI.defaults?=?{?
????
????//彈出的信息
????message:??'<h1>Please?wait...</h1>',?
?
????//定義消息框樣式
????//?$.blockUI.defaults.css?=?{};?
????//默認定義消息框樣式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瀏覽器中使IFrame獲得焦點，未驗證的
????forceIframe:?false,?
?
????//?遮罩層的Z-Index值，越大越在上面
????baseZ:?1000,?
?
????//?是否居中
????centerX:?true,?
????centerY:?true,?
?
????//是否允許拉大?
????//短的網頁上。禁用如果你想防止車身高度的變化
????allowBodyStretch:?true,?
?
???//遮罩時是否禁用鍵盤和鼠標事件
????bindEvents:?true,?
?
????//?be?default?blockUI?will?supress?tab?navigation?from?leaving?blocking?content?
????//?(if?bindEvents?is?true)?
????//遮罩內容的Tab導航是否可用
????constrainTabKey:?true,?
?
????//淡入時間
????fadeIn:??200,?
?
???????//淡出時間
????fadeOut:??400,?
?
????//?time?in?millis?to?wait?before?auto-unblocking;?set?to?0?to?disable?auto-unblock?
????//自動淡出時間
????timeout:?0,?
?
????//disable?if?you?don't?want?to?show?the?overlay?
????//是否自動遮罩
????showOverlay:?true,?
?
????//?if?true,?focus?will?be?placed?in?the?first?available?input?field?when?
????//?page?blocking?
????//自動獲得焦點
????focusInput:?true,?
?
????//抑制FF/Linux的疊加樣式的使用（由于具有不透明的性能問題）
????applyPlatformOpacityRules:true,
?
????//調用解封已完成時回調方法;
????//?onUnblock(element,?options)?
????onUnblock:?null
?
?總結：上面的文字個人認為寫的比較爛，但基本的使用沒有問題，詳盡的支持是官網：http://www.malsup.com/jquery/block/,這個站還有一些其它插件也值得看看。
?
本文示例下載
轉載于:https://www.cnblogs.com/best/archive/2011/10/01/2197842.html
總結
以上是生活随笔為你收集整理的弹出层之2：JQuery.BlockUI的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【郭林专刊】10个步骤让你成为高效的We
- 下一篇： 凯越USB无法播放