jquery插件之jquery.lock

异步处理(如ajax调用)时, 常常需要锁定一些区域, 避免重复操作.
常见的如切换<button>的disabled属性, 设置标志等.

下面要介绍的是jquery.lock.js.
用法很简单(在线demo可在这里看):

let $content = $('.content');
let isLock = false;
$(document).on('click', '#btn', function() {
  isLock = !isLock;
  
  if (isLock) {
    $content.lock();
  } else {
    $content.unlock();
  }
});

实现原理也很简单, 就是将当前元素设置为相对定位, 然后将"蒙层"以绝对定位覆盖上去:

$.fn.lock = function() {
  return this.unlock().each(function() {
    if ($.css(this, "position") == "static") this.style.position = "relative";
    if ($.browser.msie) this.style.zoom = 1;
    $(this).append(
      '<div class="lockUI" style="position:absolute;width:100%;height:100%;top:0;left:0;z-index:1000;background-color:#000;cursor: wait;opacity: 0.3;filter: alpha(opacity=30);"><div>'
    );
  });
};
$.fn.unlock = function() {
  return this.each(function() {
    $(".lockUI", this).remove();
  });
};

感觉非常实用!
欢迎补充指正!

参考: http://www.hujuntao.com/web/jquery/jquery-lock-plugin.html