Mask plug-in, jquery mask plug-in

Mask plug-in, jquery mask plug-in

1/* mask plug-in 2 * Optional options 3 * smBoxBg small square mask color default # FFFFFF 4 * backgroudColor large mask color default #000000 5 * backgroundImage dynamic image default loading.gif 6 * text information default loading .... 7 * opacity: 0.6 large mask transparency default 0.6 8 **/9/* 10 use demo 11 $ ("body "). setLoading ("body") 12 setTimeout (function () {13 $ ("body "). rmoveLoading ("body") 14}, 5000) 15 // ===================================================16 // other parameter IDs must be set to 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", // background color 31 backgroundImage: "data: image/gif; base64, r0lGODlhIAAgALMAAP // 7Ozs/v7 + release/39/VRUVAAAACH/release + release/V/release + release/gYmDho + QkZKTR3p7EQAh + release/release + /7 NQmBggo/fYKHCX8AiAmEEQAh + release/FYV4TNWNz4oqWoEIgL0HX/release + release/erEYGDlu/release + release/release = ", // background image 32 text: "loading .... ", // text 33 width: 150, // width 34 height: 60, // height 35 type: 1, // 0 cover all, 1 partial cover 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), 43G = 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 undefined"); 60} else {61 openPartialLayer (this, opt ); 62} 63 64 // mask 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 = watermark (obj).css ("height "); // The height of the element with px 72 ewidth = percentile (obj).css ("width"); 73} 74 top = $ (obj ). offset (). top; // The Position of the element in the document does not affect 75 left = $ (obj ). offset (). left; 76 layer = $ ("<div id =" + opt. id + "> </div>"); 77 layer.css ({78 style: 'z-index: 100', 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 (" <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)