jQuery UI dialog

初始化参数

对于 dialog 来说，首先需要进行初始化，在调用 dialog 函数的时候，如果没有传递参数，或者传递了一个对象，那么就表示在初始化一个对话框。

没有参数，表示按照默认的设置初始化对话框，在当前最新版本的 jQuery UI 1.8.9 中， dialog 支持下列属性。

autoOpen   初始化之后，是否立即显示对话框，默认为 true

modal        是否模式对话框，默认为 false

closeOnEscape   当用户按 Esc 键之后，是否应该关闭对话框，默认为 true

draggable  是否允许拖动，默认为 true

resizable    是否可以调整对话框的大小，默认为 true

title           对话框的标题，可以是 html 串，例如一个超级链接。

position     用来设置对话框的位置，有三种设置方法

     1.  一个字符串，允许的值为  'center', 'left', 'right', 'top', 'bottom'.  此属性的默认值即为 'center'，表示对话框居中。
     2.  一个数组，包含两个以像素为单位的位置，例如， 

var dialogOpts = {
    position: [100, 100]
};

     3. 一个字符串组成的数组，例如， ['right','top']，表示对话框将会位于窗口的右上角。

var dialogOpts = {
    position: ["left", "bottom"]
};

eg:

$("#dialog").dialog({
    bgiframe: true,
    resizable: false,
    height:140,
    modal: true,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    buttons: {
        'Delete all items in recycle bin': function() {
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

close     关闭对话框

$(this).dialog('close');

            $oneCalendar.dialog({
                title: '测试标题 ',
                autoOpen: true,
                modal: true,
                 700,
                height: 250,
                dialogClass: "my-dialog"
            });

 $("#one").dialog().dialog("close");

    //隐藏某dialog
    function HideMoreMonthDialog() {
        $("#divMore").dialog("close");
        $("#divMore").dialog("destroy");
    }

    //初始化dialog
    function initMoreDrag() {
        $("#divMore").hide();
        $("#divMore").dialog({
            autoOpen: true,
            height: 700,
             850,
            modal: true,
            title: "详情",
            close: function (event, ui) {             
                IsShowTwelveMonth = false;
                hideDivClickAndDivDayCount();
                $("#divMore").dialog("destroy");
            }
        });
    }

        $("#dvEditStaffDaily").dialog({
            autoOpen: false,
             1100,
            height: 650,
            dialogClass: "my-dialog",
            resizable: false,
            position: "center",
            title:  "**详情"),
            close:function()
            {
                if (flagclicked == true) {
                    SearchStaffDailyList2();
                    flagclicked = false;
                }
                $("#dvEditStaffDaily").html("<span style="color:red">数据正在加载，请稍侯……</span>");
            }
        });

封装一个弹出层方法

    <div id="ps_alert">
        <p id="showP">
        </p>
    </div>

/*
* 提供ps_alert和ps_confirm两种dialog
* 参数：
*  调用时参数情况：
    ps_alert("test",function1,function2,setting);
    ps_alert("test");
    ps_alert("test",function1);
    ps_alert("test",function1,function2);
    ps_alert("test",function1,null,setting);
    ps_alert("test",null,function2,setting);
    ps_alert("test",null,null,setting);
*  1 text:dialog显示的内容
*  2 psCallbackYes:yes按钮的回调函数
*  3 psCallbackNo：no按钮的回调函数
*  4 setting：设置dialog的属性
            title：标题(目前不显示标题)
            text：显示内容：若参数text没有值，则显示此值
            errorType：错误图标
            width：宽度
            height：高度
            buttons：1 ps_alertLanguages中的第一个  2 ps_alertLanguages中的第二  A ps_alertLanguages中全部显示 
* 公共变量：默认的语言ps_alertLanguages={buttonYes:"Yes",buttonNO:"No"}
*/

//默认的语言buttonText
var ps_alertLanguages = {
    buttonYes: "Yes",
    buttonNo: "No"
};

//alert 
/*
method({title:"",contents:"",errorType:"",0,height:0,buttons:""})
*/
ps_alert = function (text, psCallbackYes, psCallbackNo, setting) {
    ps_return = "";
    if (isNaN(setting) && setting != undefined) {
        ps_alert1(text, psCallbackYes, psCallbackNo, { title: setting.title,
            contents: setting.contents,
            errorType: setting.errorType,
             setting.width,
            height: setting.height,
            buttons: "1"
        });
    } else {
        ps_alert1(text, psCallbackYes, psCallbackNo, { buttons: "1" });
    }
}

//confirm 
ps_confirm = function (text, psCallbackYes, psCallbackNo, setting) {
    ps_return = "";
    if (isNaN(setting) && setting != undefined) {
        ps_alert1(text, psCallbackYes, psCallbackNo, { title: setting.title,
            contents: setting.contents,
            errorType: setting.errorType,
             setting.width,
            height: setting.height,
            buttons: "A"
        });
    } else {
       ps_alert1(text, psCallbackYes, psCallbackNo, { buttons: "A" });
    }
}

//method({title:"",text:"",errorType:"",0,height:0})
ps_alert1 = function (text, psCallbackYes, psCallbackNo, setting) {

    //alert and confirm 的返回值
    var ps_return;

    //default parameter
    var defaultSetting = {
        title: "",
        text: "",
        errorType: "",
         300,
        height: 200,
        buttons: ""
    };
    //init
    $("#ps_alert").dialog({
        dialogClass: "no-close",
        dialogClass: "no-title",
        modal: true,
        autoOpen: false,
        draggable: false,
        resizable: false,
        closeOnEscape: false
    });

    //默认回调函数Yes
    if (!isNaN(psCallbackYes) || psCallbackYes == undefined) {
        psCallbackYes = psCallbackDefaultYes;
    }

    //默认回调函数No
    if (!isNaN(psCallbackNo) || psCallbackNo == undefined) {
        psCallbackNo = psCallbackDefaultNo;
    }

    /* 
    * load div ps_alert 
    */
    $.extend(defaultSetting, setting);

    //获得对象变量
    var dialogE = $("#ps_alert");
    var isOpen = dialogE.dialog("isOpen");

    //清空dialog的text
    $("#showP").text("");

    //deal the buttons
    var buttons;
    if (defaultSetting.buttons == "1") {
        buttons = [{
            text: ps_alertLanguages.buttonYes,
            click: function () {
                ps_return = ps_alertLanguages.buttonYes;
                $("#ps_alert").dialog("close"); //关闭ps_alert
                $("#ps_alert").dialog("destroy"); //销毁ps_alert
                $("#showP").hide();
                if (psCallbackYes) {
                    psCallbackYes(ps_return); //执行回调函数
                }
            }
        }];
    } else if (defaultSetting.buttons == "2") {
        buttons = [{
            text: ps_alertLanguages.buttonNo,
            click: function () {
                ps_return = ps_alertLanguages.buttonNo;
                $("#ps_alert").dialog("close"); //关闭ps_alert
                $("#ps_alert").dialog("destroy"); //销毁ps_alert
                $("#showP").hide();
                if (psCallbackNo) {
                    psCallbackNo(ps_return); //执行回调函数
                }
            }
        }];
    } else if (defaultSetting.buttons == "A") {
        buttons = [{
            text: ps_alertLanguages.buttonYes,
            click: function () {
                ps_return = ps_alertLanguages.buttonYes;
                $("#ps_alert").dialog("close"); //关闭ps_alert
                $("#ps_alert").dialog("destroy"); //销毁ps_alert
                $("#showP").hide();
                if (psCallbackYes) {
                    psCallbackYes(ps_return); //执行回调函数
                }
            }
        }, {
            text: ps_alertLanguages.buttonNo,
            click: function () {
                ps_return = ps_alertLanguages.buttonNo;
                $("#ps_alert").dialog("close"); //关闭ps_alert
                $("#ps_alert").dialog("destroy"); //销毁ps_alert
                $("#showP").hide();
                if (psCallbackNo) {
                    psCallbackNo(ps_return); //执行回调函数
                }
            }
        }];
    }

    if (!isOpen) {//如果关闭

        //加载新buttons
        $("#ps_alert").dialog({
            buttons: buttons
        });

        // dialogE.dialog("dialogClass", "no-title");

        //修改title
        dialogE.dialog("option", "title", defaultSetting.title);

        //add icon
        var Indexs = "<span class='" + defaultSetting.errorType + "' style='float: left; margin: 0 7px 50px 0;'></span>";
        $("#showP").append(Indexs);

        //显示text
        if (isNaN(text))
            $("#showP").append(text);
        else
            $("#showP").append(defaultSetting.contents);

        //打开
        $("#showP").show();
        dialogE.dialog("open");
    }
}


//默认回调函数1
psCallbackDefaultYes = function () {
     
}

//默认回调函数1
psCallbackDefaultNo = function () {
    
}