jquery.blockUI.js 网页遮罩层插件

发布于 2020-09-13 14:23:04 字数 13847 浏览 1552 评论 0

jQuery BlockUI 插件可以在不同锁定浏览器的同时，模拟同步模式下发起 Ajax 请求的行为。使用 XMLHttpRequest 对象同步模式导致整个浏览器锁定，直到远程调用完成为止。这通常不是一种可取的行为。该插件激活时，会组织用户在页面进行的操作，直到插件被关闭。BlockUI 通过向 DOM 中添加元素实现其外观和组织用户交互的行为。

使用 jQuery BlockUI，首先需要在 jQuery 后面引用 jquery.blockUI.js

使用方法

用法很简单，组织用户对页面的交互：

$.blockUI();

使用自定义信息阻塞UI

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

使用自定义样式阻塞UI

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

解除对页面的遮罩

$.unblockUI();

如果你先要使用缺省设置对所有的ajax请求都使用UI遮罩，只需要添加下面语句即可

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

页面阻塞示例

此页面演示了几种阻止页面的方法。然后对服务器进行远程调用。此页使用下列代码：

<script type="text/javascript">

  // unblock when ajax activity stops
  $(document).ajaxStop($.unblockUI);

  function test() {
    $.ajax({ url: 'wait.php', cache: false });
  }

  $(document).ready(function() {
    $('#pageDemo1').click(function() {
      $.blockUI();
      test();
    });
    $('#pageDemo2').click(function() {
      $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
      test();
    });
    $('#pageDemo3').click(function() {
      $.blockUI({ css: { backgroundColor: '#f00', color: '#fff' } });
      test();
    });

    $('#pageDemo4').click(function() {
      $.blockUI({ message: $('#domMessage') });
      test();
    });
  });

</script>

...

<div id="domMessage" style="display:none;">
  <h1>We are processing your request.  Please be patient.</h1>
</div>

元素阻塞示例

此页面演示如何阻止页面上的选定元素，而不是整个页面。

此页使用下列代码：

$(document).ready(function() {

    $('#blockButton').click(function() {
      $('div.test').block({ message: null });
    });

    $('#blockButton2').click(function() {
      $('div.test').block({
        message: '<h1>Processing</h1>',
        css: { border: '3px solid #a00' }
      });
    });

    $('#unblockButton').click(function() {
      $('div.test').unblock();
    });

    $('a.test').click(function() {
      alert('link clicked');
      return false;
    });
  });

简单模态对话框示例

本页演示如何显示一个简单的模态对话框。下面的按钮将调用 blockUI 有一条定制的信息。根据用户响应(是或否)，将在保持UI阻塞的同时进行Ajax调用。

此页使用下列代码：

<script type="text/javascript">
  $(document).ready(function() {

    $('#test').click(function() {
      $.blockUI({ message: $('#question'), css: { width: '275px' } });
    });

    $('#yes').click(function() {
      // update the block message
      $.blockUI({ message: "<h1>Remote call in progress...</h1>" });

      $.ajax({
        url: 'wait.php',
        cache: false,
        complete: function() {
          // unblock when remote call returns
          $.unblockUI();
        }
      });
    });

    $('#no').click(function() {
      $.unblockUI();
      return false;
    });

  });
</script>

...

<input id="test" type="submit" value="Show Dialog" />

...

<div id="question" style="display:none; cursor: default">
    <h1>Would you like to contine?.</h1>
    <input type="button" id="yes" value="Yes" />
    <input type="button" id="no" value="No" />
</div>

演示

下面的大部分演示将显示2秒。

登录表格

$(document).ready(function() {
  $('#demo1').click(function() {
    $.blockUI({ message: $('#loginForm') });

    setTimeout($.unblockUI, 2000);
  });
});

iPhoto (ish)

$(document).ready(function() {
  $('#demo2').click(function() {
    $.blockUI({ css: {
      border: 'none',
      padding: '15px',
      backgroundColor: '#000',
      '-webkit-border-radius': '10px',
      '-moz-border-radius': '10px',
      opacity: .5,
      color: '#fff'
    } });

    setTimeout($.unblockUI, 2000);
  });
});

蓝色覆盖层

$(document).ready(function() {
  $('#demo3').click(function() {
    $.blockUI({ overlayCSS: { backgroundColor: '#00f' } });

    setTimeout($.unblockUI, 2000);
  });
});

Tall Content

$(document).ready(function() {
  $('#demo4').click(function() {
    $.blockUI({
      message: $('#tallContent'),
      css: { top: '20%' }
    });

    setTimeout($.unblockUI, 2000);
  });
});

Image Box

$(document).ready(function() {
  $('#demo5').click(function() {
    $.blockUI({
      message: $('#displayBox'),
      css: {
        top:  ($(window).height() - 400) /2 + 'px',
        left: ($(window).width() - 400) /2 + 'px',
        width: '400px'
      }
    });

    setTimeout($.unblockUI, 2000);
  });
});

非居中信息

$(document).ready(function() {
  $('#demo6').click(function() {
    $.blockUI({
      centerY: 0,
      css: { top: '10px', left: '', right: '10px' }
    });

    setTimeout($.unblockUI, 2000);
  });
});

没有消息的阻塞

将空作为消息传递

$(document).ready(function() {
  $('#demo7').click(function() {
    $.blockUI({ message: null });

    setTimeout($.unblockUI, 2000);
  });
});

onUnblock 回调

使用 fadeout 选项时有用，因为当所有阻塞元素已被移除。

$(document).ready(function() {
  $('#demo8').click(function() {
    $.blockUI();

    setTimeout(function() {
      $.unblockUI({
        onUnblock: function(){ alert('onUnblock'); }
      });
    }, 2000);
  });
});

单击以取消阻塞。

此演示将不会自动解除阻塞，您必须单击覆盖。

$(document).ready(function() {
  $('#demo9').click(function() {
    $.blockUI();
    $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
  });
});

自动解锁

在指定的超时之后，设置要取消阻塞的计时器。

$(document).ready(function() {
  $('#demo10').click(function() {
    $.blockUI({
      message: '<h1>Auto-Unblock!</h1>',
      timeout: 2000
    });
  });
});

Growl 艰难的方式

$(document).ready(function() {
  $('#demo11').click(function() {
    $.blockUI({
      message: $('div.growlUI'),
      fadeIn: 700,
      fadeOut: 700,
      timeout: 2000,
      showOverlay: false,
      centerY: false,
      css: {
        width: '350px',
        top: '10px',
        left: '',
        right: '10px',
        border: 'none',
        padding: '5px',
        backgroundColor: '#000',
        '-webkit-border-radius': '10px',
        '-moz-border-radius': '10px',
        opacity: .6,
        color: '#fff'
      }
    });
  });
});

Growl 简单的方式

$(document).ready(function() {
   $('#demo12').click(function() {
     $.growlUI('Growl Notification', 'Have a nice day!');
   });
});

上面的两个咆哮示例还使用了以下外部 CSS：

div.growlUI { background: url(check48.png) no-repeat 10px 10px }
div.growlUI h1, div.growlUI h2 {
  color: white; padding: 5px 5px 5px 75px; text-align: left
}

注意：要获得更全面的 growl 实现，请查看优秀的 JGrowl 插件。

JQuery UI 主题

使用 jQuery UI 主题来样式消息

$(document).ready(function() {
  $('#demo13').click(function() {
    $.blockUI({
      theme:   true,
      title:  'This is your title',
      message:  '<p>This is your message.</p>',
      timeout:   2000
    });
  });   
});

onBlock 回调

$(document).ready(function() {
  $('#demo14').click(function() {
    $.blockUI({
      fadeIn: 1000,
      timeout:   2000,
      onBlock: function() {
        alert('Page is now blocked; fadeIn complete');
      }
    });
  });   
});

onOverlayClick 回调

单击以取消阻塞。

$(document).ready(function() {
  $('#demo15').click(function() {
    $.blockUI({
      onOverlayClick: $.unblockUI
    });
  });   
});

可选参数

BlockUI 的默认选项看起来完全正确如下：

// override these in your code to change the default behavior and style
$.blockUI.defaults = {
  // message displayed when blocking (use null for no message)
  message:  '<h1>Please wait...</h1>',

  title: null,    // title string; only used when theme == true
  draggable: true,  // only used when theme == true (requires jquery-ui.js to be loaded)

  theme: false, // set to true to use with jQuery UI themes

  // styles for the message when blocking; if you wish to disable
  // these and use an external stylesheet then do this in your code:
  // $.blockUI.defaults.css = {};
  css: {
    padding:    0,
    margin:     0,
    width:      '30%',
    top:      '40%',
    left:       '35%',
    textAlign:    'center',
    color:      '#000',
    border:     '3px solid #aaa',
    backgroundColor:'#fff',
    cursor:     'wait'
  },

  // minimal style set used when themes are used
  themedCSS: {
    width:  '30%',
    top:  '40%',
    left:   '35%'
  },

  // styles for the overlay
  overlayCSS:  {
    backgroundColor: '#000',
    opacity:     0.6,
    cursor:      'wait'
  },

  // style to replace wait cursor before unblocking to correct issue
  // of lingering wait cursor
  cursorReset: 'default',

  // styles applied when using $.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 issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w
  // (hat tip to Jorge H. N. de Vasconcelos)
  iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',

  // force usage of iframe in non-IE browsers (handy for blocking applets)
  forceIframe: false,

  // z-index for the blocking overlay
  baseZ: 1000,

  // set these to true to have the message automatically centered
  centerX: true, // <-- only effects element blocking (page block controlled via css above)
  centerY: true,

  // allow body element to be stetched in ie6; this makes blocking look better
  // on "short" pages.  disable if you wish to prevent changes to the body height
  allowBodyStretch: true,

  // enable if you want key and mouse events to be disabled for content that is blocked
  bindEvents: true,

  // be default blockUI will supress tab navigation from leaving blocking content
  // (if bindEvents is true)
  constrainTabKey: true,

  // fadeIn time in millis; set to 0 to disable fadeIn on block
  fadeIn:  200,

  // fadeOut time in millis; set to 0 to disable fadeOut on unblock
  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,

  // suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)
  // no longer needed in 2012
  // applyPlatformOpacityRules: true,

  // callback method invoked when fadeIn has completed and blocking message is visible
  onBlock: null,

  // callback method invoked when unblocking has completed; the callback is
  // passed the element that has been unblocked (which is the window object for page
  // blocks) and the options that were passed to the unblock call:
  //   onUnblock(element, options)
  onUnblock: null,

  // don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
  quirksmodeOffsetHack: 4,

  // class name of the message block
  blockMsgClass: 'blockMsg',

  // if it is already blocked, then ignore it (don't unblock and reblock)
  ignoreIfBlocked: false
};

更改 blockUI 选项很简单，可以通过以下两种方式之一完成：

全局情况下，通过直接重写$.blockUI.defaults对象
在本地，通过将Options对象传递给blockUI(或block)功能。

全局覆盖

只需为默认选项声明不同的值，就可以更改它们。例如：

// change message border
$.blockUI.defaults.css.border = '5px solid red';

// make fadeOut effect shorter
$.blockUI.defaults.fadeOut = 200;

局部覆盖

本地重写是通过将对象传递给blockUI, unblockUI, block或unblock职能。这个完全相同的选项是可用的。指向全局对象中可用的本地选项对象。例如：

// change message border
$.blockUI({ css: { border: '5px solid red'} });

...

// make fadeOut effect shorter
$.unblockUI({ fadeOut: 200 });

...

// use a different message
$.blockUI({ message: 'Hold on!' });

...

// use a different message
$('#myDiv').block({ message: 'Processing...' });