jQuery实现锁屏

 

        当我们在前端通过ajax调用后台的时候,由于数据量各有不同,可能会造成长时间的等待,但此时等待的用户仍然可以操作界面上的其他元素,例如重新点击一个按钮,这种情况是不被允许的.或者有时候需要执行某些操作后,对用户界面进行锁屏,经过一段时间后重新恢复,此时当然会想到在页面上增加一层div来进行遮挡,但jQuery的BlockUI已经帮你完成了这样的工作,我们可以通过简单的js代码来达到各种各样的效果

       

这个插件的用法很简单。

1 阻止用户与页面交互：

$.blockUI();

2 自定义提示信息：

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

3 自定义显示样式：

$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });

4 解除对页面的锁定：

$.unblockUI();

5 如果要使用默认设置来同步所有的AJAX请求动作，代码如下：

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);

 

用法：

第一步：下载blockUI和jQuery的js

第二步：引入js

<script type="text/javascript" src="jquery-1.6.1.min.js">

</script>  <script type="text/javascript" src="jquery-block-ui.js"></script> 

第三步：js调用

$(function(){      

      function showBlock(){  

       	//若然只想锁屏但不显示任何信息,可以设置为null      

       	$.blockUI({

         		message:"<span style="font-size:13px;font-weight:bolder">请稍候</span>";

		//可以为BlockUI增加样式

		css : {

                		border : "none",

                		padding : "15px",

                		backgroundColor : "#000",

                		"-webkit-border-radius" : "10px",

                		"-moz-border-radius" : "10px",

                		opacity : .5,

                		color : "#fff"

          	}

		// 遮光罩的css</wbr>

		overlayCSS: {

			color:'#fff',
   			border:'3px solid #aaa',
   			backgroundColor:'#CC3300',
  			opacity:"0.8"
 		}
	})

      }

      function hideBlock(){   
      	$.unblockUI(); //解屏  
      }<pre>

})

 

$(function(){

            //可以为BlockUI增加样式

            $.blockUI({ css : {

              border : "none",

                padding : "15px",

                backgroundColor : "#000",

                "-webkit-border-radius" : "10px",

                "-moz-border-radius" : "10px",

                opacity : .5,

                color : "#fff"

          }})      

})  

 

$(function(){

      /* * 可直接获取id为loginForm的表单来进行弹出,* 实现类似popup的功能 */

     $.blockUI({

          message : $("#loginForm")

      })

      //2秒后关闭遮挡

      setTimeout($.unblockUI,2000);

})   

 

$(function(){ 

         $.blockUI({ 

             //当锁屏后点击其他地方触发的事件,这里触发为解除锁屏

              onOverlayClick : $.unblockUI

          });

});  

 

$(function(){

          //设置全局ajax开始时锁屏

          $(document).ajaxStart(function () {

              blocks();

          });

          //设置全局ajax结束时解锁

          $(document).ajaxStop(function () {

              $.unblockUI();

          });

});  

总结:
    使用BlockUI只需要编写少量代码就能实现轻松方便的锁屏和解锁,还可以设置自定义的样式去控制BlcokUI样式的显示,作为jQueryUI的小工具,极其易学和使用方便