jQuery.fn 开发组件

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 

如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 

那么你可以这样子：$("#div").abc();

jQuery.extend合并参数

$.extend(opt1,opt2);这样就是opt2的参数覆盖opt1的参数

开发dialog组件为例

主要结构为

$.fn.dialog = function(options){
    //设置参数
    var option = {
        content : "",//传入文本
        button  : [
            //{"txt" : "","func":function(){}} //传入的格式
        ],//传入对象 
        closeTime : 2000,//没有按钮时默认消失的时间
    }
    
    //合并参数（传进来的参数把默认的参数覆盖掉）
    var opts = $.extend(option,options);
}

调用方式

$("#box").dialog({
    content : "恭喜您，已抽8元红包",
    button  : [
        {"txt" : "取消","func" : function(){
            //按钮过后的回调函数
	}},
	"txt" : "确定","func" : function(){
	    //点击过后的回掉函数
	}},
    ],
    closeTime : 2000,//没有按钮时，默认关闭时间，默认为2000
})

示例

约定好组件的调用参数为：

$("#box").dialog({
    content : "恭喜您，已抽8元红包",
    button  : [
        {"txt" : "取消","func" : function(){
           //按钮过后的回调函数
        }},
        {"txt" : "确定","func" : function(){
          //点击过后的回掉函数
       }},
    ],
    //closeTime : 2000,//没有按钮时，默认关闭时间，默认为2000
})

html代码：

<div id="box">
  点我
</div>

css代码：

*{
    margin:0;
    padding:0;
}
a{
    text-decoration: none;
    color:#333;
}
body{
    font-size: 1em;
    font-family: "微软雅黑";
    color:#333;
}
.jq_dialog{
    max-width:15em;
    max-height:9.5em;
    overflow: hidden;
    border-radius: 7px;
    border:1px solid #aaa;
    position: fixed;
    z-index: 999999999;
}
.jq_main{
    line-height: 1.5em;
    max-height:6.5em;
    width:100%;
    overflow: hidden;
    padding:10px;
    box-sizing: border-box;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.none{
    display: none;
}
.clearfix:after{
    display: block;
    clear: both;
    content: "";
}
.left{
    float: left;
}
.jq_btn_1{
    height:1.8em;
    line-height: 1.8em;
    text-align: center;
    box-sizing: border-box;
}
.jq_btn_1:not(:last-child){
    border-right:1px solid #aaa;
}
.jq_btn_all{
    border-top:1px solid #aaa;
}

jquery代码

$(function(){

    $.fn.dialog = function(options){
        //设置参数
        var option = {
            content : "",//传入文本
            button  : [
                //{"txt" : "","func":function(){}} //传入的格式
            ],//传入对象 
            closeTime : 2000,//没有按钮时默认消失的时间
        }
        //何必参数
        var opts = $.extend(option,options);
        // 留住this
        var _self = $(this);
        //添加dom方法
        function addDom(){
            // html元素添加
            var oContaniner = $("<div class='jq_dialog none' id='jq_dialog'></div>");;
            var oContent = $("<div class='jq_main'>"+opts.content+"</div>");
            var oBtnAll = $("<div id='jq_btn_all' class='jq_btn_all clearfix'></div>");;
            oContaniner.append(oContent);
            if(opts.button.length > 0){
                oContaniner.append(oBtnAll)
            }
            $("body").append(oContaniner)
            //设置居中样式
            oContaniner.css({
                "left":($(window).width()-parseInt(oContaniner.css("width")))/2,
                "top" :($(window).height()-parseInt(oContaniner.css("height")))/2-20,
            })
            // 判断是否有按钮
            var obtn1 = (opts.button[0] == undefined || opts.button[0].txt == null || opts.button[0].txt == "")? "" : $("<a class='jq_btn_1 left' href='javascript:;'>"+opts.button[0].txt+"</a>");;
            var obtn2 = (opts.button[1] == undefined || opts.button[1].txt == null || opts.button[1].txt == "") ? "" : $("<a class='jq_btn_1 left jq_btn_2' href='javascript:;'>"+opts.button[1].txt+"</a>");
            oBtnAll.append(obtn1).append(obtn2);
            oContaniner.fadeIn(300);
            // 设置按钮的宽度
            $(".jq_btn_1").css("width",parseInt(oBtnAll.css("width"))/$(".jq_btn_1").length);
            // 按钮回调
            obtn1.length >= 1 && obtn1.click(function(){
                oContaniner.fadeOut(300,function(){
                    $(this).remove();
                });
                typeof(opts.button[0].func) == "function" && opts.button[0].func();
            })

            obtn2.length >= 1 && obtn2.click(function(){
                oContaniner.fadeOut(300,function(){
                    $(this).remove();
                });
                typeof(opts.button[1].func) == "function" && opts.button[1].func();
            })

            if(opts.button.length == 0){

                setTimeout(function(){

                    oContaniner.fadeOut(300,function(){
                        $(this).remove();
                    });

                },opts.closeTime)

            }
        }
        $(_self).click(function(){
            addDom()
        })
    }

    $("#box").dialog({
        content : "恭喜您，已抽8元红包",
        button  : [
                {"txt" : "取消","func" : function(){
                    //按钮过后的回调函数
                }},
                {"txt" : "确定","func" : function(){
                    //点击过后的回掉函数
                }},
        ],
        //closeTime : 2000,//没有按钮时，默认关闭时间，默认为2000
    })
})