Jquery - UI - Dialog

jQuery UI Dialog經常使用的參數有：

一、autoOpen：默認true，即dialog方法建立就顯示對話框
二、buttons：默認無，用於設置顯示的按鈕，能夠是JSON和Array形式:
{"肯定":function(){},"取消":function(){}}
[{text:"肯定", click: function(){}},{text:"取消",click:function(){}}]
三、modal：默認false，是否模態對話框，若是設置爲true則會建立一個遮罩層把頁面其餘元素遮住
四、title：標題
五、draggable：是否可手動，默認true
六、resizable：是否可調整大小，默認true
七、width：寬度，默認300
八、height：高度，默認"auto"

其餘一些不太經常使用的參數：

一、closeOnEscape：默認true，按esc鍵關閉對話框
二、show：打開對話框的動畫效果
三、hide：關閉對話框的動畫效果
四、position：對話框顯示的位置，默認"center"，能夠設置成字符串或數組：
'center', 'left', 'right', 'top', 'bottom'
['right','top']，經過上面的幾個字符串組合(x,y)
[350,100]，絕對的數值(x,y)
五、minWidth：默認150，最小寬度
六、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>

View Code