jQuery插件实例一：年华时代插件Alert对话框

　　在工作中使用jQuery插件相信对于程序员来说非常普遍，在网络上也有很多优秀的插件可供大家使用，功能非常强大。在之前用过的一些插件中，有些太过追求功能的强大和可配置性，造成使用的复杂度上升。个人认为与其做一个大而全的插件，不如做一个有限通用性、小巧、方便的插件来得实用，在一个网页中进行这个网页要用的功能插件，而一个插件的几K或十几K大少对于服务器来说完全可以忽略。因此我总则了自己开发插件的一个原则，对于一个特定功能的插件：

插件原则：少配置，限通用性，方便快捷部署

　　从这篇开始，将会把自己写的插件写到网上，方便今后随时可以使用，做为一名ASP.NET程序员，如果大家在文中发现了错误、不恰当的地方，还请留言多多指正。

　　这篇文中介绍的这个插件的效果类似于JS中的alert(“ ”);函数，按钮部分可以为文字搭配背景颜色，也可以使用图片，宽度与高度可配置。按照：少配置，限通用性，方便快捷部署的原则，只使用：$("#t1").nhsdAlert({"content": "这个就是内容" });这行代码即可使用。在实例的项目应用中，整个网站风格保持一至，应此在正常情况下最多$("#t1").nhsdAlert({ "title": "操作提示2", "content": "这个就是内容2" });即可使用。

效果图：

代码：

 ;
 (function ($, window, document, undefined) {
     var defaults = {
         'title': '',
         'titleAlign': 'left',
         'titleColor': '#df5066',
         'content': '',
         'contentMargin': '7px',
         'buttonText': '确定',
         'buttonWidth': '56px',
         'buttonHeight': 'auto',
         'buttonMargin': '20px 0 10px 90px',
         'buttonColor': '#df5066',
         'buttonFontSize': '1.2em',
         'buttonFontColor': 'white',
         'buttonBorder': '1px solid #df5066',
         'isButtonImg': 'false',
         'buttonImgUrl': '',
         'bgColor': '#F8F8F8',
         'width': '240px',
         'height': 'auto',
         'isTopRightCorner': 'true',
         'isAutoHide': 'true',
         'showTimeBySecond': '60',
         'margin': '-50px 0 0 -120px',
         'left': '50%',
         'top': '50%',
         'position': 'fixed',
         'border': '2px solid #df5066;',
         'shadeColor': '#FFCCFF',
         'shadeOpacity': '.4',
         'isTitle': true,
         'isSure': true,//是否有确定按钮
         'closeImgUrl': '/Images/Extend/cancel.png'
     };

     $.fn.nhsdAlert = function (options) {
         var $parentDiv = $(this);
         var $shadeDiv;
         var $opts = $.extend({}, defaults, options);
         var tMargin = parseInt($opts.width) / 2;
         $opts.margin = '-50px 0 0 -' + tMargin + 'px';
         $opts.buttonMargin = '20px 0 10px ' + (tMargin - (parseInt($opts.buttonWidth) / 2)) + 'px';
         function appearanceStyle() {
             $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();
             if ($opts.isTitle == true) {
                 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);
                 $title.attr('style', 'line-height: 22px;font-weight: bold;text-indent: 5px;line-height: 22px;color:#fff;height:22px;background-color:' + $opts.titleColor);
             }
             $("#alert_close").bind('click', function() {
                 $parentDiv.html('').hide();
                 $shadeDiv.remove();
             });
             var $contentParentDiv = $('<div></div>').appendTo($parentDiv);
             var $contentDiv = $('<div></div>').html($opts.content).appendTo($contentParentDiv);
             $contentDiv.attr('style', 'font-size: 12px;margin:' + $opts.contentMargin + ';position:relative');
             if ($opts.isSure == true) {
                 var $bottomDiv = $('<div></div>').appendTo($parentDiv);
                 $bottomDiv.attr('style', 'position: relative;');
                 var $bottomButton;
                 if ($opts.isButtonImg == 'false') {
                     $bottomButton = $('<div>' + $opts.buttonText + '</div>').appendTo($bottomDiv).bind('click', function () {
                         $parentDiv.html('').hide();
                         $shadeDiv.remove();
                     });
                     $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);
                 } else {
                     //按钮为图片
                     $bottomButton = $('<img src=' + $opts.buttonImgUrl + ' alt=""></img>').appendTo($bottomDiv).bind('click', function () {
                         $parentDiv.remove();
                         $shadeDiv.remove();
                     });
                     $bottomButton.attr('style', 'position: relative;cursor: pointer;' + ';margin:' + $opts.buttonMargin);
                 }
             }
         }
         function shadeDiv() {
             $shadeDiv = $('<div></div>').appendTo($('body'));
             $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;');
         }
         shadeDiv();//遮罩层
         appearanceStyle();//内容层
         return this;
     }
 })(jQuery, window, document);

前台调用：

 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <script src="~/Scripts/Extend/jquery-1.9.1.min.js"></script>
     <script src="~/Scripts/Extend/json2.js"></script>
     <script src="~/Scripts/Extend/nhsdAlert.js"></script>
     <title>AlertZ</title>
     <script type="text/javascript">
         $(document).ready(function () {
             var t = $("#t1").nhsdAlert({ "title": "操作提示", "content": "这个就是内容" });
             $("#btn_t").bind('click', function () {
                 $("#t1").nhsdAlert({ "title": "操作提示2", "content": "这个就是内容2" });
             });
             $("#btn_t2").bind('click', function () {
                 $("#t1").nhsdAlert({ "title": "操作提示3", "content": "这个就是内容3" });
             });
         });
     </script>
 </head>
 <body>
     <div>
         <div id="t1">
         </div>
         <input type="button" name="name" value="Alert第一个" id="btn_t" />
         <input type="button" name="name" value="Alert第二个" id="btn_t2" />
         <script type="text/javascript">
             for (var i = 0; i < 200; i++) {
                 $('<p></p>').html('<a href="javascript:void(0);">' + i + '</a>').appendTo($('body'));
             }
         </script>
     </div>
 </body>
 </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 讨论交流。