Jquery給我們提供了很大的方便，我們把他看成是一個公共庫，以致在這個公共庫上延伸出了很多Jquery插件；在項目過程中，有些插件總是不那么令人滿意；
主要說兩個項目用途：
1、 遮罩層，跟一般的遮罩層不一樣，我需要實現的是對某一個元素進行局部遮罩；
2、 冒泡提示，網上有很多，我需要的只是一種在頁面指定位置彈出來的一個靜止定位的div而已；兩個就自己了；
首先說下jquery插件開發的簡單思路與幾個操作方法
1 /*產生隨機數*/ 2 ; (function ($) { 3 $.Random = function (under, over) { 4 switch (arguments.length) { 5 case 1: return parseInt(Math.random() * under + 1); 6 case 2: return parseInt(Math.random() * (over - under + 1) + under); 7 default: return 0; 8 } 9 } 10 })(jQuery);
1、 我們一般在寫一個公共方法時會在前面定義一個”;”，在網上看到有人說這是書寫習慣，其實這個一種容錯機制，有點sql中go的意思，就是把上面的代碼跟自己的這個擴展插件給分開，因為插件是被引入到頁面，如果這個插件上面有錯誤，且別人忘記以”；”結尾，那么我們寫的這個插件就會受到影響，所以加上開頭的分號；
2、 分號后面在定義一個匿名的函數，並且閉包，傳入一個jQuery參數進去，就完成一個jquery插件的基本定義；
1 ; (function ($) { 2 })(jQuery);
3、 插件的主體就是我們的功能處理塊；一般我們使用的jquery的時候，有兩種情況
a、$.ajax(option);這種是屬於jquery本身提供的方法
b、$(“”).each(option);這種是屬於jquery對象提供的方法
我們上面的兩個需求中，第一個需求是進行局部遮罩，就需要知道是遮罩那個頁面元素了，顯示就需要封裝一個jquery對象方法；
先完成第一個需求
1 ; (function ($) { 2 $.fn.extend({ 3 loading: function (option, param) { 4 } 5 }); 6 })(jQuery);
因為我們是封裝到對象上的方法，所以使用$.fn.extend(opiotn)將我們的loading函數累加到$.fn上面，寫完這些就可以在js中使用$(“#div1”).loading(option,param);進行調用了；
還有一個最重要的東西就是參數的合並；一個插件肯定是可以靈活配置的，當然我們也應該默認的提供一個看上去可以使用的頁面參數；
在定義完$.fn.extend后，接着定義默認值：
1 $.fn.loading.defaults = { 2 loadingText: "loading", //加載時要顯示的文字 3 loadingHide: false, //原來的遮罩層是否需要隱藏 4 opacity: 0.6, //透明度 5 bgColor: "black", //遮罩層的背景色 6 fontColor: "#fff" //遮罩層中的color 7 }
默認值有了后，我們還需要將我們自定義的參數給傳進來，比如我們的調用
$("#div4").loading({ loadingText: "加載用戶信息中，請稍后" });
Juery給我們提供了一個方式用來合並相關參數
option = $.extend($.fn.loading.defaults, option);
這個option就是默認參數+我們傳進來的自定義參數合並后的結果了；
其實這個比較簡單，就是因為我們知道要遮罩層的對象，然后進行創建一個div在需要被遮罩的div的上方就可以；
$this.position().top;可以得到傳進來的div距離瀏覽器上方的高度
$this.position().left; 可以得到傳進來的div距離瀏覽器左邊的寬度
給遮罩層賦值，就是給offset(option)進行賦值，賦值方式，可以參考w3cschool上的示例；
$("#" + loadingId).offset(function (n, c) {
newPos = new Object();
newPos.left = left;
newPos.top = top;
return newPos;
})
基本在此就已經封裝完了整個插件；現在在遮罩層的基礎上在加一個需求，比如在已經彈出的遮罩層的基礎上在次改變遮罩層的相關屬性，比如文字，顏色等；
我們用過一些jquery組件都會提供事件和方法
比如我們在使用jquery.easyui的時候，事件在定義在option中，就可以在符合條件時觸發，
我們在option里面加入一個參數就可以做到
onLoadSuccess:null //調用回調 //在符合條件的時候回調一下即可 if (option.onLoadSuccess != null) { option.onLoadSuccess("這是參數"); }
方法的寫法如下：
1 loading: function (option, param) { 2 var $this = this; 3 if (typeof option == 'string') { 4 switch (option) { 5 case 'setLoadingText': 6 return this.each(function () { 7 var id = $this.attr("id"); 8 var loadingId = id + "Loading"; 9 $("#" + loadingId + "span").html(param); 10 }); 11 } 12 } 13 } 14 //調用 15 $("#div1").loading("setLoadingText","系統錯誤，請與管理員聯系");
我剛開始以為要用到jquery里面的什么提供的方式，其實很簡單，判斷下option是不是string,如果是就是方法的調用；我們在使用jquery的時候，一定是要將當前對象給each一下，因為我們有可能不止選擇一個對象，而是多個；
同樣的冒泡提示也是如此，只是用$.tips=function(option,param)即可
下面貼出代碼：
1 ; (function ($) { 2 $.fn.extend({ 3 loading: function (option, param) { 4 var $this = this; 5 if (typeof option == 'string') { 6 switch (option) { 7 case 'hide': 8 return this.each(function () { 9 var id = $this.attr("id"); 10 var loadingId = id + "Loading"; 11 $("#" + loadingId).hide().detach(); 12 if ($("#" + id).css("display") == "none") { 13 $("#" + id).show(); 14 } 15 }); 16 case 'setLoadingText': 17 return this.each(function () { 18 var id = $this.attr("id"); 19 var loadingId = id + "Loading"; 20 $("#" + loadingId + "span").html(param); 21 }); 22 } 23 } 24 25 var setting = { 26 loadingText: "loading", 27 loadingHide: false, 28 opacity: 0.6, 29 bgColor: "black", 30 fontColor: "#fff", 31 onLoadSuccess:null 32 33 } 34 35 var top = $this.offset().top; 36 var left = $this.offset().left; 37 var height = $this.height(); 38 var width = $this.width(); 39 40 //合並參數 41 option = $.extend($.fn.loading.defaults, option); 42 var id = $this.attr("id"); 43 var loadingId = id + "Loading"; 44 var divHtml = "<div id='" + loadingId 45 + "' style='background-color:" + option.bgColor 46 + ";opacity:" + option.opacity 47 + ";display:none;text-align:center;position:absolute;color:" + option.fontColor 48 + ";' data-isHide='false'><span id='" + loadingId 49 + "span'>" + option.loadingText + "</span></div>"; 50 51 if ($("#" + loadingId).length > 0) { 52 var isHide = $("#" + loadingId).attr("data-isHide"); 53 if (isHide) { //如果是顯示的話 54 return this; 55 } else { 56 $("#" + loadingId).remove(); 57 } 58 } 59 //將loadingdiv插入頁面中 60 $this.before(divHtml); 61 62 //計算居中的padding值 63 var loadingHeight = $("#" + loadingId).height(); 64 var paddingTop = height / 2 - loadingHeight; 65 66 //判斷原來的div是不是要隱藏 67 if (option.loadingHide) { 68 $this.hide(); 69 } 70 $("#" + loadingId).offset(function (n, c) { 71 newPos = new Object(); 72 newPos.left = left; 73 newPos.top = top; 74 return newPos; 75 }).height(height - paddingTop).width(width).show(); 76 77 //居中 78 $("#" + loadingId).css("padding-top", paddingTop + "px"); 79 80 //調用回調 81 if (option.onLoadSuccess != null) { 82 option.onLoadSuccess("這是參數"); 83 } 84 } 85 }); 86 })(jQuery);
效果圖：
1 ; (function ($) { 2 $.Tips = function (option, param) { 3 if (typeof(option) == 'string') { 4 switch(option){ 5 case "setText": 6 setText(param); 7 break; 8 case "setHtml": 9 setHtml(param); 10 break; 11 case "hideTips": 12 hideTips(param); 13 break; 14 case "hideTipsAll": 15 hideTipsAll(); 16 break; 17 } 18 return; 19 } 20 21 function setText(param) { 22 $("#" + param.id + "span").text(param.text); 23 } 24 function setHtml(param) { 25 $("#" + param.id + "span").html(param.html); 26 } 27 function hideTips(param) { 28 $("#" + param.id).remove(); 29 } 30 31 function hideTipsAll() { 32 $(".tips-MessTips").remove(); 33 } 34 35 var setting = { 36 id: 'auto', 37 width: 300, 38 height: 20, 39 backgroundColor: "rgb(217, 237, 247)", 40 left: 'auto', 41 top: 20, 42 tipMess: '正在加載中，請稍后', 43 iconImg: '../Content/MyCustom/images/info16.png', 44 time: 3 45 } 46 47 var documentWidth = $(document).width(); 48 var documentHeight = $(document).height(); 49 //合並參數 50 option = $.extend(setting, option); 51 52 if (option.left = 'auto') { 53 var tipWidth = option.width; 54 if (typeof (option.width) == "string") { 55 tipWidth = documentWidth *parseFloat(option.width)/100; 56 } 57 option.left = (documentWidth - tipWidth) / 2; 58 } else if (typeof (option.left) == "string" && option.left.indexOf("%") > 0) { 59 option.left = option.left * parseFloat(option.left) / 100; 60 } 61 if (typeof (option.top) == "string" && option.top.indexOf("%") > 0) { 62 option.top = option.top * parseFloat(option.top) / 100; 63 } 64 if (typeof (option.width) == "string" && option.width.indexOf("%") > 0) { 65 option.width = documentWidth * parseFloat(option.width) / 100; 66 } 67 if (typeof (option.height) == "string" && option.height.indexOf("%") > 0) { 68 option.height = documentHeight * parseFloat(option.height) / 100; 69 } 70 71 if (option.id == 'auto') { 72 option.id = 'tips' + $.Random(0, 999999999); 73 } 74 75 option.time = option.time * 1000; 76 77 78 var htmlDiv = '<div class=" tips-MessTips" id="' + option.id 79 + '" ' 80 + 'style="display:none;overflow:hidden;border-color:#bce8f1;color:#3a87ad;left: ' + option.left 81 + 'px; top: ' + option.top 82 + 'px; width: ' + option.width 83 + 'px; height: ' + option.height 84 + 'px; position: fixed; background-color:' + option.backgroundColor 85 + ';"><img src="' + option.iconImg 86 + '" /><span id="' + option.id 87 + 'span">' + option.tipMess 88 + '</span></div>' 89 90 //如果已經存在的DIV 91 if ($("#" + option.id).length > 0) { 92 $("#" + option.id + "span").html(option.tipMess); 93 return; 94 } 95 96 //如果還沒有一個tip 97 if ($(".tips-MessTips").length == 0) { 98 $("body").append(htmlDiv); 99 } else { 100 $(".tips-MessTips").each(function () { 101 $(this).offset(function (n, c) { 102 newPos = new Object(); 103 newPos.left = $(this).offset().left; 104 newPos.top = $(this).offset().top + option.height; 105 return newPos; 106 }) 107 }); 108 109 $(".tips-MessTips").first().before(htmlDiv); 110 } 111 if (option.time > 0) { 112 setTimeout( 113 function () { 114 $("#" + option.id).remove(); 115 }, option.time); 116 } 117 118 //顯示當前的窗口 119 return $("#" + option.id).show(); 120 }; 121 122 })(jQuery);
效果圖
會在指定時間消失，多個自動往下排列