1. 首页
  2. 编程与技术

使用jQuery制作Web页面遮罩层插件的实例教程

发布于 2017-03-30 08:37:35 | 148 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

GitHub上人们分享的遮罩层插件也是玲琅满目,不过自己动手做一个的话肯定更复合自己的需求,这里就带大家来看使用jQuery制作Web页面遮罩层插件的实例教程,需要的朋友可以参考下

在网页上经常遇到需要等待很久的操作，比如导出报表等。为了预防用户点击其他操作或者多次点击同个功能，需要用遮罩层把页面或者操作区盖住，防止用户进行下一步操作，同时可以提高界面友好度，让用户知道操作正在执行。


$.fn.extend({ 
  /** 
   * 给元素添加遮罩层 
   * @param message {String} [可选]遮罩层显示内容 
   */ 
  mask: function (message) { 
    var $target = this, 
      fixed = false, 
      targetStatic = true; 
 
    if (Object.prototype.toString.call(message) !== '[object String]' || !message) { 
      //如果message为空或者不是字符串，则用默认的消息提示。 
      message = '请稍候。。。'; 
    } 
 
    if ($target.length === 0) { 
      $target = $('body'); 
    } else { 
      if ($target.length > 1) { 
        $target = $target.first(); 
      } 
 
      if ($target[0] === window || $target[0] === document) { 
        $target = $('body'); 
      } 
    } 
     
    if($target[0] === document.body){ 
      fixed = true; 
    } 
 
    //如果目标元素已经有遮罩层，获取遮罩层 
    var old = $target.data('rhui.mask'); 
    if (old) { 
      old.$content.html(message); 
      center($target, old.$content, fixed); 
      return; 
    } 
 
    //如果被遮盖的元素是static，把元素改成relative 
    if ($target.css('position') === 'static') { 
      targetStatic = true; 
      $target.css('position', 'relative'); 
    } 
 
    var $content, $overlay; 
    if (fixed) { 
      $overlay = $('<div class="rhui-mask" style="position:fixed;"></div>'); 
      $content = $('<div class="rhui-mask-content" style="position:fixed;">' + message + '</div>'); 
    } else { 
      $overlay = $('<div class="rhui-mask"></div>'); 
      $content = $('<div class="rhui-mask-content">' + message + '</div>'); 
    } 
 
    $overlay.appendTo($target); 
    $content.appendTo($target); 
 
    //显示遮罩层 
    $overlay.show(); 
    $content.show(); 
 
    //让遮罩层居中 
    center($target, $content, fixed); 
 
    //把遮罩层信息添加到$target 
    $target.data('rhui.mask', { 
      fixed: fixed, 
      $overlay: $overlay, 
      $content: $content, 
      targetStatic: targetStatic 
    }); 
 
    /** 
     * 让遮罩层内容居中显示 
     * @param $target  被遮盖的元素 
     * @param $content 遮罩层内容元素 
     * @param fixed   遮罩层是否固定显示 
     */ 
    function center($target, $content, fixed) { 
      var $window, 
        height = $content.outerHeight(true), 
        width = $content.outerWidth(true); 
 
      if (fixed) { 
        //如果遮罩层固定显示，让遮罩层在window居中 
        $window = $(window); 
        $content.css({ 
          left: ($window.width() - width) / 2, 
          top: ($window.height() - height) / 2 
        }); 
      } else { 
        //让遮罩层在$target中居中 
        $content.css({ 
          left: ($target.width() - width) / 2, 
          top: ($target.height() - height) / 2 
        }); 
      } 
    } 
  }, 
 
  /** 
   * 取消遮罩层 
   */ 
  unmask: function () { 
    var $target; 
 
    if (this.length === 0) { 
      $target = $('body'); 
    } else { 
      $target = this.first(); 
      if ($target[0] === window || $target[0] === document) { 
        $target = $('body'); 
      } 
    } 
 
    var data = $target.data('rhui.mask'); 
    if (!data) { 
      return; 
    } 
 
    //还原目标元素的position属性 
    if (data.targetStatic) { 
      $target.css('position', 'static'); 
    } 
 
    data.$overlay.remove(); 
    data.$content.remove(); 
 
    $target.removeData('rhui.mask'); 
  } 
});

插件样式由rhui-mask和rhui-mask-content类控制，rhui-mask是遮罩层样式，rhui-mask-content是遮罩层的提示内容样式。


/* 遮罩层样式 */ 
.rhui-mask { 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  z-index: 9000; 
  display: block; 
  margin: 0; 
  padding: 0; 
  border-style: none; 
  background-color: #777; 
  opacity: 0.3; 
  zoom: 1; 
  filter: alpha(opacity=30); 
} 
 
/* 遮罩层显示内容样式 */ 
.rhui-mask-content { 
  position: absolute; 
  z-index: 9999; 
  display: block; 
  margin: 0; 
  padding: 15px 20px; 
  border: 2px solid rgb(109, 157, 215); 
  background-color: #fff; 
  color: blue; 
  letter-spacing: 2px; 
  font-weight: bold; 
  font-size: 15px; 
  cursor: wait; 
}

效果如图所示

页面调用完整代码


<!DOCTYPE html> 
<html> 
 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <title>网页遮罩层的实现</title> 
  <style type="text/css"> 
    /* 遮罩层样式 */    
    .rhui-mask { 
      position: absolute; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 
      z-index: 9000; 
      display: block; 
      margin: 0; 
      padding: 0; 
      border-style: none; 
      background-color: #777; 
      opacity: 0.3; 
      zoom: 1; 
      filter: alpha(opacity=30); 
    } 
     
    /* 遮罩层显示内容样式 */    
    .rhui-mask-content { 
      position: absolute; 
      z-index: 9999; 
      display: block; 
      margin: 0; 
      padding: 15px 20px; 
      border: 2px solid rgb(109, 157, 215); 
      background-color: #fff; 
      color: blue; 
      letter-spacing: 2px; 
      font-weight: bold; 
      font-size: 15px; 
      cursor: wait; 
    } 
  </style> 
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script> 
  <script type="text/javascript"> 
    $.fn.extend({ 
      /** 
       * 给元素添加遮罩层 
       * @param message {String} [可选]遮罩层显示内容 
       */ 
      mask: function (message) { 
        var $target = this, 
          fixed = false, 
          targetStatic = true; 
 
        if (Object.prototype.toString.call(message) !== '[object String]' || !message) { 
          //如果message为空或者不是字符串，则用默认的消息提示。 
          message = '请稍候。。。'; 
        } 
 
        if ($target.length === 0) { 
          $target = $('body'); 
        } else { 
          if ($target.length > 1) { 
            $target = $target.first(); 
          } 
 
          if ($target[0] === window || $target[0] === document) { 
            $target = $('body'); 
          } 
        } 
 
        if ($target[0] === document.body) { 
          fixed = true; 
        } 
 
        //如果目标元素已经有遮罩层，获取遮罩层 
        var old = $target.data('rhui.mask'); 
        if (old) { 
          old.$content.html(message); 
          center($target, old.$content, fixed); 
          return; 
        } 
 
        //如果被遮盖的元素是static，把元素改成relative 
        if ($target.css('position') === 'static') { 
          targetStatic = true; 
          $target.css('position', 'relative'); 
        } 
 
        var $content, $overlay; 
        if (fixed) { 
          $overlay = $('<div class="rhui-mask" style="position:fixed;"></div>'); 
          $content = $('<div class="rhui-mask-content" style="position:fixed;">' + message + '</div>'); 
        } else { 
          $overlay = $('<div class="rhui-mask"></div>'); 
          $content = $('<div class="rhui-mask-content">' + message + '</div>'); 
        } 
 
        $overlay.appendTo($target); 
        $content.appendTo($target); 
 
        //显示遮罩层 
        $overlay.show(); 
        $content.show(); 
 
        //让遮罩层居中 
        center($target, $content, fixed); 
 
        //把遮罩层信息添加到$target 
        $target.data('rhui.mask', { 
          fixed: fixed, 
          $overlay: $overlay, 
          $content: $content, 
          targetStatic: targetStatic 
        }); 
 
        /** 
         * 让遮罩层内容居中显示 
         * @param $target  被遮盖的元素 
         * @param $content 遮罩层内容元素 
         * @param fixed   遮罩层是否固定显示 
         */ 
        function center($target, $content, fixed) { 
          var $window, 
            height = $content.outerHeight(true), 
            width = $content.outerWidth(true); 
 
          if (fixed) { 
            //如果遮罩层固定显示，让遮罩层在window居中 
            $window = $(window); 
            $content.css({ 
              left: ($window.width() - width) / 2, 
              top: ($window.height() - height) / 2 
            }); 
          } else { 
            //让遮罩层在$target中居中 
            $content.css({ 
              left: ($target.width() - width) / 2, 
              top: ($target.height() - height) / 2 
            }); 
          } 
        } 
      }, 
 
      /** 
       * 取消遮罩层 
       */ 
      unmask: function () { 
        var $target; 
 
        if (this.length === 0) { 
          $target = $('body'); 
        } else { 
          $target = this.first(); 
          if ($target[0] === window || $target[0] === document) { 
            $target = $('body'); 
          } 
        } 
 
        var data = $target.data('rhui.mask'); 
        if (!data) { 
          return; 
        } 
 
        //还原目标元素的position属性 
        if (data.targetStatic) { 
          $target.css('position', 'static'); 
        } 
 
        data.$overlay.remove(); 
        data.$content.remove(); 
 
        $target.removeData('rhui.mask'); 
      } 
    }); 
  </script> 
</head> 
 
<body> 
  <div id="div" style="width:600px;height:300px;margin:10px;border:1px solid red;"></div> 
 
  <script type="text/javascript"> 
    $(function () { 
      //遮盖整个页面 
      //只要对window、document和body使用遮罩层，都会遮盖整个页面 
      //$(window).mask();      
      //$(window).unmask(); 取消遮罩 
 
      //遮盖div 
      $('#div').mask('加载中，请稍候。。。'); 
    }); 
  </script> 
</body> 
 
</html>



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务