Jquery - UI - Dialog

jQuery UI Dialog常用的参数有：

1、autoOpen：默认true，即dialog方法创建就显示对话框
2、buttons：默认无，用于设置显示的按钮，可以是JSON和Array形式:
{"确定":function(){},"取消":function(){}}
[{text:"确定", click: function(){}},{text:"取消",click:function(){}}]
3、modal：默认false，是否模态对话框，如果设置为true则会创建一个遮罩层把页面其他元素遮住
4、title：标题
5、draggable：是否可手动，默认true
6、resizable：是否可调整大小，默认true
7、width：宽度，默认300
8、height：高度，默认"auto"

其他一些不太常用的参数：

1、closeOnEscape：默认true，按esc键关闭对话框
2、show：打开对话框的动画效果
3、hide：关闭对话框的动画效果
4、position：对话框显示的位置，默认"center"，可以设置成字符串或数组：
'center', 'left', 'right', 'top', 'bottom'
['right','top']，通过上面的几个字符串组合(x,y)
[350,100]，绝对的数值(x,y)
5、minWidth：默认150，最小宽度
6、minHeight：默认150，最小高度

 

使用方法：
$("...").dialog({
title: "标题",
//...更多参数
});

主要方法
jQuery UI Dialog提供了一些方法来控制对话框，仅列出常用的：

open：打开对话框
close：关闭对话框（通过close不会销毁，还能继续使用）
destroy：销毁对话框
option：设置参数，即前面列出的参数
使用的时候作为dialog方法的参数：
复制代码 代码如下:
var dlg = $("...").dialog({
//...各种参数
});
dlg.dialog("option", { title: "标题" }); // 设置参数
dlg.dialog("open"); // 使用open方法打开对话框

主要事件
jQuery UI Dialog提供了一些事件，比如打开、关闭对话框的时候做一些额外的事情：

open：打开时
close：关闭时
create：创建时
resize：调整大小时
drag：拖动时
使用方法同参数的使用方法，比如在打开时隐藏关闭按钮：
复制代码 代码如下:
$("...").dialog({
//...各种参数
open: function(event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
}
});

JAVASCRIPT:

<script type="text/javascript">
    $(function () {
        //hover states on the static widgets
        $('#dialog_link, ul#icons li').hover(
            function () { $(this).addClass('ui-state-hover'); },
            function () { $(this).removeClass('ui-state-hover'); }
        );

        //初始化对话框
        $("#dialog").dialog
        ({
            autoOpen: false,
            width: 600,
            modal: true,
            resizable: false,
            buttons: {
                "Login": function () {
                    $.ajax({
                        type: 'post',
                        url: '/User/Login',
                        data: $('form').serialize(), //序列化对象参数
                        success:function(data){
                            $(this).dialog("close");
                            location.href = "/User/Testing";
                        }
                    });
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            } 
        });

        //打开对话框
        $("#dialog_link").click(function () {
            $("#dialog").dialog("open");
            return false;
        });
    });
</script>

VIEW:

    <!-- jquery dialog -->
    <h2 class="demoHeaders">Dialog</h2>
            <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
    <div id="dialog" title="LOGIN">
        @using (Html.BeginForm())
        {
        
            @Html.EditorFor(model => model.UserName) <br />
            @Html.PasswordFor(model => model.Password)      <br />
            @Html.TextBoxFor(model => model.VerificationCode)   
                <img id="verificationcode" alt="" src="@Url.Action("VerificationCode", "User")" />
                    <a id="trydifferent" style="cursor: pointer">换一张</a>     
        }
    </div>  


<script type="text/javascript">
    //刷新验证码
    $("#trydifferent").click(function () {
        $("#verificationcode").attr("src", "/User/VerificationCode?" + new Date());
    })

</script>