在工作中使用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 + ';' + $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;' + $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; 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 讨论交流。