在工作中使用jQuery插件相信對於程序員來說非常普遍，在網絡上也有很多優秀的插件可供大家使用，功能非常強大。在之前用過的一些插件中，有些太過追求功能的強大和可配置性，造成使用的復雜度上升。個人認為與其做一個大而全的插件，不如做一個有限通用性、小巧、方便的插件來得實用，在一個網頁中進行這個網頁要用的功能插件，而一個插件的幾K或十幾K大少對於服務器來說完全可以忽略。因此我總則了自己開發插件的一個原則，對於一個特定功能的插件：
插件原則：少配置，限通用性，方便快捷部署
從這篇開始，將會把自己寫的插件寫到網上，方便今后隨時可以使用，做為一名ASP.NET程序員，如果大家在文中發現了錯誤、不恰當的地方，還請留言多多指正。
這篇文中介紹的這個插件的效果類似於JS中的alert(“ ”);函數，按鈕部分可以為文字搭配背景顏色，也可以使用圖片，寬度與高度可配置。按照：少配置，限通用性，方便快捷部署的原則，只使用：$("#t1").nhsdAlert({"content": "這個就是內容" });這行代碼即可使用。在實例的項目應用中，整個網站風格保持一至，應此在正常情況下最多$("#t1").nhsdAlert({ "title": "操作提示2", "content": "這個就是內容2" });即可使用。
效果圖：
代碼：
1 ; 2 (function ($, window, document, undefined) { 3 var defaults = { 4 'title': '', 5 'titleAlign': 'left', 6 'titleColor': '#df5066', 7 'content': '', 8 'contentMargin': '7px', 9 'buttonText': '確定', 10 'buttonWidth': '56px', 11 'buttonHeight': 'auto', 12 'buttonMargin': '20px 0 10px 90px', 13 'buttonColor': '#df5066', 14 'buttonFontSize': '1.2em', 15 'buttonFontColor': 'white', 16 'buttonBorder': '1px solid #df5066', 17 'isButtonImg': 'false', 18 'buttonImgUrl': '', 19 'bgColor': '#F8F8F8', 20 'width': '240px', 21 'height': 'auto', 22 'isTopRightCorner': 'true', 23 'isAutoHide': 'true', 24 'showTimeBySecond': '60', 25 'margin': '-50px 0 0 -120px', 26 'left': '50%', 27 'top': '50%', 28 'position': 'fixed', 29 'border': '2px solid #df5066;', 30 'shadeColor': '#FFCCFF', 31 'shadeOpacity': '.4', 32 'isTitle': true, 33 'isSure': true,//是否有確定按鈕 34 'closeImgUrl': '/Images/Extend/cancel.png' 35 }; 36 37 $.fn.nhsdAlert = function (options) { 38 var $parentDiv = $(this); 39 var $shadeDiv; 40 var $opts = $.extend({}, defaults, options); 41 var tMargin = parseInt($opts.width) / 2; 42 $opts.margin = '-50px 0 0 -' + tMargin + 'px'; 43 $opts.buttonMargin = '20px 0 10px ' + (tMargin - (parseInt($opts.buttonWidth) / 2)) + 'px'; 44 function appearanceStyle() { 45 $parentDiv.attr('style', 'z-index: 30000;font-size:12px;background-color:' + $opts.bgColor + ';width:' + $opts.width + ';height:' + $opts.height + ';margin:' + $opts.margin + ';left:' + $opts.left + ';top:' + $opts.top + ';position:' + $opts.position + ';border:' + $opts.border).show(); 46 if ($opts.isTitle == true) { 47 var $title = $('<div></div>').html('<span style="text-align:' + $opts.titleAlign + '">' + $opts.title + '</span><img src=' + $opts.closeImgUrl + ' id="alert_close" style="float: right;cursor:pointer;"/>').appendTo($parentDiv); 48 $title.attr('style', 'line-height: 22px;font-weight: bold;text-indent: 5px;line-height: 22px;color:#fff;height:22px;background-color:' + $opts.titleColor); 49 } 50 $("#alert_close").bind('click', function() { 51 $parentDiv.html('').hide(); 52 $shadeDiv.remove(); 53 }); 54 var $contentParentDiv = $('<div></div>').appendTo($parentDiv); 55 var $contentDiv = $('<div></div>').html($opts.content).appendTo($contentParentDiv); 56 $contentDiv.attr('style', 'font-size: 12px;margin:' + $opts.contentMargin + ';position:relative'); 57 if ($opts.isSure == true) { 58 var $bottomDiv = $('<div></div>').appendTo($parentDiv); 59 $bottomDiv.attr('style', 'position: relative;'); 60 var $bottomButton; 61 if ($opts.isButtonImg == 'false') { 62 $bottomButton = $('<div>' + $opts.buttonText + '</div>').appendTo($bottomDiv).bind('click', function () { 63 $parentDiv.html('').hide(); 64 $shadeDiv.remove(); 65 }); 66 $bottomButton.attr('style', 'font-size: 12px;line-height: 25px;line-height: 22px;font-weight: bold;color:#fff;width:' + $opts.buttonWidth + ';height:' + $opts.buttonHeight + ';background-color:' + $opts.buttonColor + ';position: relative;cursor: pointer;text-align: center' + ';margin:' + $opts.buttonMargin + ';font-size:' + $opts.buttonFontSize + ';color:' + $opts.buttonFontColor + ';border:' + $opts.buttonBorder); 67 } else { 68 //按鈕為圖片 69 $bottomButton = $('<img src=' + $opts.buttonImgUrl + ' alt=""></img>').appendTo($bottomDiv).bind('click', function () { 70 $parentDiv.remove(); 71 $shadeDiv.remove(); 72 }); 73 $bottomButton.attr('style', 'position: relative;cursor: pointer;' + ';margin:' + $opts.buttonMargin); 74 } 75 } 76 } 77 function shadeDiv() { 78 $shadeDiv = $('<div></div>').appendTo($('body')); 79 $shadeDiv.attr('style', 'top: 0;left: 0;margin: -8px;width: 104%;height: 104%;position: fixed;opacity:' + $opts.shadeOpacity + ';background-color: ' + $opts.shadeColor + ';z-index: 29999;'); 80 } 81 shadeDiv();//遮罩層 82 appearanceStyle();//內容層 83 return this; 84 } 85 })(jQuery, window, document);
前台調用：
1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <script src="~/Scripts/Extend/jquery-1.9.1.min.js"></script> 5 <script src="~/Scripts/Extend/json2.js"></script> 6 <script src="~/Scripts/Extend/nhsdAlert.js"></script> 7 <title>AlertZ</title> 8 <script type="text/javascript"> 9 $(document).ready(function () { 10 var t = $("#t1").nhsdAlert({ "title": "操作提示", "content": "這個就是內容" }); 11 $("#btn_t").bind('click', function () { 12 $("#t1").nhsdAlert({ "title": "操作提示2", "content": "這個就是內容2" }); 13 }); 14 $("#btn_t2").bind('click', function () { 15 $("#t1").nhsdAlert({ "title": "操作提示3", "content": "這個就是內容3" }); 16 }); 17 }); 18 </script> 19 </head> 20 <body> 21 <div> 22 <div id="t1"> 23 </div> 24 <input type="button" name="name" value="Alert第一個" id="btn_t" /> 25 <input type="button" name="name" value="Alert第二個" id="btn_t2" /> 26 <script type="text/javascript"> 27 for (var i = 0; i < 200; i++) { 28 $('<p></p>').html('<a href="javascript:void(0);">' + i + '</a>').appendTo($('body')); 29 } 30 </script> 31 </div> 32 </body> 33 </html>
開篇說明：
1、開始的分號（;）：這個分號寫在開頭是為了避免網頁文檔之前代碼語句沒有結束，保證這上閉包完整性而寫，通常請不要省略。
2、function ($, window, document, undefined)，這是為了把全局參數傳過來，如果在調用這個插件之前改變了JS默認代碼功能，這這樣寫就可以保證在插件中使用的是JS原生window對象參數。
3、jQuery插件基本格式：
; (function ($, window, document, undefined) { var defaults = { 'key': 'value' }; $.fn.nhsdAlert = function (options) { var $parentDiv = $(this); $parentDiv.html(""); var $opts = $.extend({}, defaults, options);
return this;
} })(jQuery, window, document);
PS：
歡迎加群： 258387392 討論交流。