jQuery插件实例一：年华时代插件Alert对话框
浏览数：20 /
时间：2015年06月09日
在工作中使用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 }; 33 34 $.fn.nhsdAlert = function (options) { 35 var $parentDiv = $(this); 36 var $shadeDiv; 37 var $opts = $.extend({}, defaults, options); 38 var tMargin = parseInt($opts.width) / 2; 39 $opts.margin = ‘-50px 0 0 -‘ + tMargin + ‘px‘; 40 $opts.buttonMargin = ‘20px 0 10px ‘ + (tMargin - (parseInt($opts.buttonWidth) / 2)) + ‘px‘; 41 function AppearanceStyle() { 42 $parentDiv.attr(‘style‘, ‘z-index: 2000;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(); 43 $title = $(‘<div></div>‘).html(‘<span style="text-align:‘ + $opts.titleAlign + ‘">‘ + $opts.title + ‘</span>‘).appendTo($parentDiv); 44 $title.attr(‘style‘, ‘line-height: 22px;font-weight: bold;text-indent: 5px;line-height: 22px;color:#fff;height:22px;background-color:‘ + $opts.titleColor); 45 $contentParentDiv = $(‘<div></div>‘).appendTo($parentDiv); 46 $contentDiv = $(‘<div></div>‘).html($opts.content).appendTo($contentParentDiv); 47 $contentDiv.attr(‘style‘, ‘font-size: 12px;margin:‘ + $opts.contentMargin + ‘;position:relative‘); 48 $bottomDiv = $(‘<div></div>‘).appendTo($parentDiv); 49 $bottomDiv.attr(‘style‘, ‘position: relative;‘); 50 if ($opts.isButtonImg == ‘false‘) { 51 $bottomButton = $(‘<div>‘ + $opts.buttonText + ‘</div>‘).appendTo($bottomDiv).bind(‘click‘, function () { 52 $parentDiv.html(‘‘).hide(); 53 $shadeDiv.remove(); 54 }); 55 $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); 56 } else { 57 //按钮为图片 58 $bottomButton = $(‘<img src=‘ + $opts.buttonImgUrl + ‘ ></img>‘).appendTo($bottomDiv).bind(‘click‘, function () { 59 $parentDiv.remove(); 60 $shadeDiv.remove(); 61 }); 62 $bottomButton.attr(‘style‘, ‘position: relative;cursor: pointer;‘ + ‘;margin:‘ + $opts.buttonMargin); 63 } 64 } 65 function ShadeDiv() { 66 $shadeDiv = $(‘<div></div>‘).appendTo($(‘body‘)); 67 $shadeDiv.attr(‘style‘, ‘top: 0;left: 0;margin: -8px;width: 104%;height: 104%;position: fixed;opacity:‘ + $opts.shadeOpacity + ‘;background-color: ‘ + $opts.shadeColor + ‘;z-index: 1990;‘); 68 } 69 ShadeDiv();//遮罩层 70 AppearanceStyle();//内容层 71 return this; 72 } 73 })(jQuery);
前台调用：
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); })(jQuery);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
