封装 jquery ui 的dialog

阅读更多
(function ($) {
    var default1={
        titleText:"提示对话框",
        submitBtnText:"确 认",
        cancelBtnText:"取 消",
        width:"200",
        height:"200",
        openCall:function(){},
        closeCall:function(){},
        submitCall:function(){},
        position:["middle","center"],
        jq:"" ,//jquery对象 $("#alert")
        jqMsg:"", //存放提示文字信息的jquery对象 $("#alertMsg")
        msg:""//提示内容
    };
    $.alertNoButton=function(option){
        var opt= $.extend(default1,option);
        opt.jq.dialog("destroy" );
        opt.jq.dialog({
            modal:true,
            title:opt.titleText,
            width:opt.width,
            height:opt.height,
            position:opt.position,
            resizable:false,
            draggable:false,
            open:function(even,ui){
                if ($.isFunction(opt.openCall)) {
                    opt.openCall();
                }
            }
        });
    };
    $.alertDialogs=function(option){
        var opt= $.extend(default1,option);
        opt.jq.dialog("destroy" );
        opt.jq.dialog({
            modal:true,
            title:opt.titleText,
            width:opt.width,
            height:opt.height,
            position:opt.position,
            resizable:false,
            draggable:false,
            buttons: [
                {
                    text: opt.submitBtnText,
                    click: function() {
                        if ($.isFunction(opt.submitCall)) {
                            opt.submitCall();
                         }
                    }
                },
                {
                    text:opt.cancelBtnText,
                    click: function() {
                        opt.jq.dialog("close");
                    }
                }
            ],

            open:function(even,ui){
                $(".ui-dialog-buttonset button").eq(1).css({"margin-left":"40px"});
                 if ($.isFunction(opt.openCall)) {
                     opt.openCall();
                 }
                },
            close:function(){
                if ($.isFunction(opt.closeCall)) {
                    opt.closeCall();
                }
            }

        });
    };
    $.alertDialog = function (option){
        var opt= $.extend(default1,option);
        opt.jq.dialog( "destroy" );
        opt.jq.dialog({
            modal:true,
            title:opt.titleText,
            width:opt.width,
            height:opt.height,
            position:opt.position,
            resizable:false,
            draggable:false,
            buttons: [
                {
                    text: opt.submitBtnText,
                    click: function() {
                        if ($.isFunction(opt.submitCall)) {
                            opt.submitCall();
                        }
                    }
                }
            ],
            open:function(even,ui){
                if(opt.jqMsg){
                    opt.jqMsg.text(opt.msg);
                }
                if ($.isFunction(opt.openCall)) {
                    opt.openCall();
                }
            },
            close:function(even,ui){
                if ($.isFunction(opt.closeCall)) {
                    opt.closeCall();
                }
            }
        });
    };
    $.confirmDialog = function (option) {
        var opt= $.extend(default1,option);
        opt.jq.dialog("destroy");
        opt.jq.dialog({
            resizable:false,
            draggable:false,
            title:opt.titleText,
            position:opt.position,
            width:opt.width,
            height:opt.height,
            modal:true,
            buttons: [
                {
                    text: opt.submitBtnText,
                    click: function() {
                        if ($.isFunction(opt.submitCall)) {
                            opt.submitCall();
                        }
                    }
                },
                {
                    text:opt.cancelBtnText,
                    click: function() {
                        opt.jq.dialog("close");
                    }
                }
            ],
            open:function(){
              opt.jqMsg.text(opt.msg);
            }
        });
    }
})(jQuery);

  调用:

 

 $.alertDialog({titleText:"错误信息提示",height:"150",width:"300",jq:$("#alert"),jqMsg:$("#alertMsg") ,msg:"您不同意万事达服务条款,不能预定",
                submitCall:function(){
                    $("#alert").dialog("close");
                }
            });

  

 

你可能感兴趣的:(封装 jquery ui 的dialog)