Jquery中的blockUI的运用

2012-10-26

Jquery中的blockUI的使用Jsp中的信息：bodyTest Show Block Information.input typebutton idtest

Jquery中的blockUI的使用
Jsp中的信息：

<body>   Test Show Block Information.<input type="button" id="test"    onclick="showBlock()" value="show Block information" /><br></body>

JavaScript的信息：

<script type="text/javascript" src="js/jquery-1.2.3.js"></script><script type="text/javascript" src="js/jquery.blockUI.js"></script><script type="text/javascript">   function showBlock(){         jQuery.blockUI({ message: "处理中，请稍候...", css: {color:'yellow',border:'3px solid #aaa',backgroundColor:'#CC3300'},overlayCSS: {backgroundColor:'green' }});}</script>

未点击按钮前的效果：

点击按钮后的效果：

具体的参数解释：
jQuery.blockUI({ message: "处理中，请稍候...",
css: {color:'yellow',border:'3px solid #aaa',
backgroundColor:'#CC3300'},overlayCSS: {backgroundColor:'green' }});
}
1.message是区域块的显示信息
2.css中的color是区域块中字体的颜色
3.css中的border和backgroundcolor是区域块的边框和背景色的设置
4.overlaycss是整个页面的背景色除去区域块的背景色。

如果要取消blockUI的显示可以调用JavaScript：

<script type="text/javascript">function hideBlock(){  jQuery.unblockUI();}</script>

热点排行

Web前端

Jquery中的blockUI的运用