Jquery中ajax加载提示插件blickUI

Posted 2021-01-27 asd169

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。

BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。

这个插件的用法很简单。

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);

$(‘#box_btn‘).click(function(){   //给box_btn绑定一个鼠标点击的事件

$.blockUI({    //当点击事件发生时调用弹出层

 message: $(‘#box‘),    //要弹出的元素box

  css: {    //弹出元素的CSS属性 top: ‘50%‘,left: ‘50%‘, textAlign: ‘left‘,marginLeft: ‘-320px‘， marginTop: ‘-145px‘，  width: ‘600px’，

 background: ‘none

　　　　　　}

      }）；

----------------------------------------------------------------------------------
BlockUI的默认选项设置如下：

 可以使用以下代码来自定义行为和样式 $.blockUI.defaults = { 	
                 锁定时显示的提示信息(无提示信息时设置为null)     message:  ‘<h1>Please wait...</h1>‘,         
  可以用CSS来格式化锁定时显示的信息    
  如果你希望使用一个外部样式表，请使用一下代码     
 $.blockUI.defaults.css = {};     css: {  padding: 0, margin:  0,width:‘30%‘,top:‘40%‘, left:‘35%‘,textAlign: ‘center‘,  color: ‘#000‘, border: ‘3px solid #aaa‘,backgroundColor:‘#fff‘ },
     设置遮罩层的样式overlayCSS:  {  backgroundColor:‘#000‘, opacity: ‘0.6‘ },  // 允许在ie6中缩放body元素。这会使较短的页面看上去好一些    
 // 如果你不想body元素的高度被改变，请设置为disable     allowBodyStretch: true,          
// 默认情况下blockUI会禁止tab导航     constrainTabKey: true,         
 // fadeOut时间单位为毫秒。设为0的话，在解除锁定时不使用fadeout效果。      fadeOut:  400,         
 // 禁止在FF/Linux上使用遮罩层样式(由于透明度的性能问题)     applyPlatformOpacityRules: 1 }; 

改变blockUI的设置非常简单，有2种方式：

• 1、全局设置, 通过直接指定$.blockUI.defaults对象的值来设置。
• 2、局部设置, 将options对象放到 blockUI (或 block) 函数内部。

全局设置

你可以通过直接的赋值来改变默认的选项。例如：

// 改变提示信息的边框 $.blockUI.defaults.css.border = ‘5px solid red‘;  // 缩短fadeOut效果的时间 $.blockUI.defaults.fadeOut = 200; 

局部设置

局部设置是将options对象放到 blockUI (或 block) 函数内部。这会强制使用局部设置来代替全局设置的值。例如:

// 改变提示信息的边框 $.blockUI({ css: { border = ‘5px solid red‘} });  ...  // 缩短fadeOut效果的时间 $.blockUI({ fadeOut: 200 });  ...  
// 使用一个不同的提示信息 $.blockUI({ message: ‘Hold on!‘ });

$.blockUI定义了一个message属性的，该属性的值就定义了要弹出的元素，比如要弹出一个id为box的div元素，就可以这样写：message: $(‘#box’)，对应了上面的第4行代码。需要注意的是，要弹出的那个元素在弹出之前要将其在页面中隐藏即设置该元素的CSS样式为display:none。

$.blockUI还定义了一个css属性，该属性可以对弹出层的样式进行再定义。细心的同志可能会打开BlockUI的库文件查看，其实在库文件中也默认定义了一个弹出层的样式，如果你在页面中定义的样式效果并不是很理想，最好是看看库文件中的$.blockUI.defaults的CSS属性。

如果你想了解一些BlockUI的更高级的用法你可以去该插件的官网看看。