使用 jQuery（中级），第 1 部分: 使用插件创建和扩展 jQuery 函数

核心提示： 清单 6. blockUI 插件的更多内容//ThesetwofunctionstelltheBlockUIthat//youwanttouseyourownCSS//codetodefinehowthedialogswillwork.Thefirstline//tellsityouwantto

清单 6. blockUI 插件的更多内容

//　These　two　functions　tell　the　BlockUI　that　
//　you　want　to　use　your　own　CSS　
//　code　to　define　how　the　dialogs　will　work.　The　first　line　
//　tells　it　you　want　to　use　your　own　CSS　for　the　dialog,　
//　the　second　line　tells　it　you　want　your　own　CSS　
//　for　the　semi-transparent　
//　layer　between　the　page　and　the　dialog.　
$.blockUI.defaults.css　=　{};　
$.blockUI.defaults.overlayCSS　=　{};　
　
//　when　the　show　button　is　pressed,　we'll　display　the　dialog.　
//　we　want　to　display　our　own　custom　DIV.　However,　note　here　
//　that　we　want　to　override　the　CSS-defined　height　and　width.　
//　After　all,　it　would　be　difficult　for　an　entire　site　to　have　
//　predefined　widths　and　heights　if　every　dialog　is　slightly　
//　different.　
$("#show").click(function(){　
　　$.blockUI({　message:$("#waitMessage"),　css:　{width:'500px',　height:'160px'}　});　
});　
　
//　When　the　cancel　button　is　pressed　on　the　DIV　dialog,　
//　we　can　close　the　dialog　
$("#cancel").click(function(){　
　　$.unblockUI();　
});　
　
//　the　CSS　you　can　override　to　make　it　look　good　on　your　site　
div.blockOverlay　
{　
　　-ms-filter:　"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";　
　　filter:　progid:DXImageTransform.Microsoft.Alpha(Opacity=50);　
　　-moz-opacity:.70;　
　　opacity:.70;　
　　background-color:　#228518;　
}　
　
div.blockMsg　
{　
　　width:　20%;　
　　top:　　20%;　
　　left:　　30%;　
　　text-align:　center;　
　　background-color:　#fff;　
　　border:　3px　solid　#044600;　
　　-moz-border-radius:　10px;　
　　-webkit-border-radius:　10px;　
　　-ms-filter:　"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";　
　　filter:　progid:DXImageTransform.Microsoft.Alpha(Opacity=100);　
　　-moz-opacity:1;　
　　opacity:1;　
　　padding:　15px;　
　　color:　#000;　
}

编缉推荐阅读以下文章

• 使用 jQuery（中级），第 2 部分: 创建自己的插件
• 使用 jQuery，第 3 部分: 用 jQuery 和 Ajax 构建富 Internet 应用程序
• 使用 jQuery，第 2 部分: 构建未来的 Web 应用程序
• 使用 jQuery，第 1 部分: 将桌面应用程序引入浏览器