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 讨论交流。