Question

为了学习jQuery UI对话框，我有下面定义的代码。

我需要执行以下三项任务

1）将我的图像用作“确定”按钮和“取消”按钮

2）使用我的自定义图像作为对话框右上端的关闭按钮

3）整个对话框的背景应为“灰色”（包括标题和OK按钮的位置。）

重点是样式应该只应用于我的对话框。所有其他小部件应该具有默认行为。对于内容区域，我可以使用#myDiv.ui-widget-content。

来实现

请为此建议代码吗？

注意：如果可能，请使用最佳做法。（例如1.使用变量$ myDialog 2.使用autoOpen：false）

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title> </title>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>


 <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/redmond/jquery-ui.css" rel="stylesheet" 
        type="text/css" />


     <link href="Styles/OverrideMyDialog.css" rel="stylesheet" 
        type="text/css" />-



<script type="text/javascript">

    $(document).ready(function () {
        var $myDialog = $(".addNewDiv").dialog(
                                    {
                                        autoOpen: false,
                                        title: 'My Title',
                                        buttons: { "OK": function () {
                                            $(this).dialog("close");
                                            ShowAlert();
                                            return true;
                                        },
                                            "Cancel": function () {
                                                $(this).dialog("close");
                                                return false;
                                            }
                                        }

                                    }
                                           );





        $('#myOpener').click(function () {
            return $myDialog.dialog('open');


        });
    });

    function ShowAlert() {
        alert('OK Pressed');
    }

</script>

<body>
    <div>
    <input id="myOpener" type="button" value="button" />
</div>
<div class="addNewDiv"  id="myDiv" title="Add new Person" >
    <table>
        <tr>
            <td>
                Name
            </td>

        </tr>
        <tr>
            <td>
                Age
            </td>

        </tr>
    </table>
</div>
</body>
</html>

另外，我创建了一个css类来仅覆盖我的对话框

的窗口小部件功能

    /*
   *File Name: OverrideMyDialog.css
   * jQuery UI CSS is overriden here for one div
  */


/* Component containers
----------------------------------*/

#myDiv.ui-widget-content 
{ 
border: 5px solid Red;
background: Gray url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
color: Green; 
}

Answer 1

我赞成上述答案。仍然 dialogClass ：'myDialogCSS'是我一直在寻找的关键。

HTML和jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-
    1.4.4.js"></script>
    <script type="text/javascript"
        src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/Sunny/jqueryui.
    css"
        rel="stylesheet" type="text/css" />
    <link href="Styles/MyStyleSheet.css"
        rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function () {
            var $myDialog = $(".addNewDiv").dialog(
            {
                modal: true,
                autoOpen: false,
                dialogClass: 'myDialogCSS',
                title: 'My Title',
                closeOnEscape: false,
                open: function(event, ui)
                {
                    //Disable OK Button
                    $(".ui-dialog-buttonpane
                        button:contains('OK')").attr("disabled", true).addClass("ui-state-disabled");
                },
                buttons: { "OK": function ()
                {
                    $(this).dialog("close");
                    ShowAlert();
                    return true;
                },
                    "Cancel": function ()
                    {
                        $(this).dialog("close");
                        return false;
                    }
                }
            }
            );
            $('#myOpener').click(function ()
            {
                return $myDialog.dialog('open');
            });
        });
        function ShowAlert() {
            alert('OK Pressed');
        }
    </script>
</head>

<body>
    <div>
        <input id="myOpener" type="button" value="button" />
    </div>
    <div class="addNewDiv" id="myDiv" title="Add new Person">
        <table>
            <tr>
                <td>Name

                </td>
            </tr>
            <tr>
                <td>Age
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

<强> MyStyleSheet.css

   /*Title Bar*/
   .myDialogCSS .ui-dialog-titlebar
     {
       /*Hide Title Bar*/
       /*display:none; */
     }

   /*Content*/
   .myDialogCSS .ui-dialog-content
     {
       font-size:30px;
     }

Answer 2

你应该自定义css文件。上课是：

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

Answer 3

为此，你必须覆盖jQuery UI（jquery.ui.theme.css）提供的默认css。

“确定”按钮的图像：您需要更改.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default背景图片。
关闭按钮：更改.ui-widget-header .ui-icon
对话背景：更改.ui-widget-content背景属性。

希望这适合你。

自定义jQuery UI对话框

3 个答案: