遮罩插件

  1 /* 遮罩插件
  2  * 可選選項
  3  * smBoxBg 小方格遮罩顏色 預設 #FFFFFF
  4  * backgroudColor 大遮罩顏色   預設  #000000
  5  * backgroundImage 動態圖片  預設 loading.gif
  6  * text 文字信息  預設  載入中....
  7  * opacity:0.6 大遮罩透明度 預設 0.6
  8  * */
  9 /*
 10  使用demo
 11              $("body").setLoading("body")
 12             setTimeout(function (){
 13                 $("body").rmoveLoading ("body")
 14             },5000)
 15             //====================================
 16             // 設置其他參數id必須傳
 17             $("body").setLoading({
 18                 id:"body"
 19             })
 20             setTimeout(function (){
 21                 $("body").rmoveLoading ("body")
 22             },5000)
 23  * */
 24 
 25 ;
 26 (function($) {
 27     $.fn.setLoading = function(option) {
 28         var defaultVal = {
 29                 smBoxBg: "#FFFFFF",
 30                 backgroudColor: "#CCCCCC", //背景色
 31                 backgroundImage: "data:image/gif;base64,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", //背景圖片
 32                 text: "載入中....", //文字 
 33                 width: 150, //寬度
 34                 height: 60, //高度
 35                 type: 1, //0全部遮，1 局部遮
 36                 opacity: 0.5
 37             },
 38             opt;
 39 
 40         if(defaultVal.backgroudColor.charAt(0) == "#") {
 41             var NOcolor = defaultVal.backgroudColor.substring(1, 7),
 42                 R = parseInt(NOcolor.substring(0, 2), 16),
 43                 G = parseInt(NOcolor.substring(2, 4), 16),
 44                 B = parseInt(NOcolor.substring(4, 6), 16);
 45             defaultVal.rgba = "rgba(" + R + "," + G + "," + B + "," + defaultVal.opacity + ")"
 46         } else {
 47             defaultVal.rgba = defaultVal.backgroudColor
 48         }
 49 
 50         if(typeof option == "string") {
 51             opt = $.extend({}, defaultVal, {
 52                 id: option
 53             });
 54         } else {
 55             opt = $.extend({}, defaultVal, option);
 56         }
 57 
 58         if(opt.id === undefined) {
 59             throw new Error("name 未定義");
 60         } else {
 61             openPartialLayer(this, opt);
 62         }
 63 
 64         //遮罩
 65         function openPartialLayer(obj, opt) {
 66             var eheight, ewidth, top, left, layer, content;
 67             if(opt.id == "body") {
 68                 eheight = "100%"
 69                 ewidth = "100%"
 70             } else {
 71                 eheight = $(obj).css("height"); //元素帶px的高寬度
 72                 ewidth = $(obj).css("width");
 73             }
 74             top = $(obj).offset().top; // 元素在文檔中位置 滾動條不影響
 75             left = $(obj).offset().left;
 76             layer = $("<div id=" + opt.id + "></div>");
 77             layer.css({
 78                 style: 'z-index:555',
 79                 position: "absolute",
 80                 height: eheight,
 81                 width: ewidth,
 82                 background: opt.rgba,
 83                 top: top,
 84                 left: left,
 85                 borderRadius: "3px",
 86                 display: "-webkit-flex",
 87                 display: "flex",
 88                 justifyContent: "center",
 89                 alignItems: "center"
 90             });
 91             if(opt.id == "body") {
 92                 layer.css({
 93                     height: "100%",
 94                     width: "100%"
 95                 })
 96             }
 97             content = $("<div id='content'></div>");
 98             content.css({
 99                 textAlign: "left",
100                 position: "absolute",
101                 zIndex: 9999,
102                 height: opt.height + "px",
103                 width: opt.width + "px",
104                 verticalAlign: "middle",
105                 background: opt.smBoxBg,
106                 borderRadius: "8px",
107                 fontSize: "13px"
108             });
109             content.append("<img style='vertical-align:middle;margin:" + (opt.height / 4) + "px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + opt.text + "</span>")
110             layer.append(content)
111             $("body").append(layer);
112             return this;
113         }
114     };
115     $.fn.rmoveLoading = function(id) {
116         if(typeof id == "string") {
117             $("#" + id).remove();
118             return this;
119         }
120     }
121 })(jQuery)