当前位置：文江博客话题详情

自定义 jQuery UI 对话框

发布于 2025-01-03 01:53:40 字数 3008 浏览 0 评论 0原文

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

我需要执行以下三个任务

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

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

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

重要的一点是样式应仅应用于我的对话框。所有其他小部件应该具有默认行为。对于内容区域，我可以使用#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; 
}

原文

For learning jQuery UI dialog, I have the code defined below.

I need to do following three tasks

1) Use my image as “OK” button and “Cancel” button

2) Use my custom image as the close button on right top end of dialog

3) Background of the whole dialog should be “gray” (including title, and place for OK button.)

The important point is the style should be applied only to my dialog. All other widgets should have default behavior. For content area, I could achieve it using #myDiv.ui-widget-content.

Can you please suggest code for this?

Note: Please use the best practices, if possible. (E.g. 1. use a variable $myDialog 2. use 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>

Also, I made a css class to override the widget functionality only for my dialog

    /*
   *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; 
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

作妖 2025-01-10 01:53:40

我对上面的答案投了赞成票。还是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;
     }

I have upvoted the above answer. Still dialogClass: 'myDialogCSS' was the key I was looking for.

HTML and 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;
     }

回复收藏 0 原文

一刻暧昧 2025-01-10 01:53:40

为此，您必须覆盖 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 背景属性。

希望这对你有用。

回复收藏 0 原文

好倦 2025-01-10 01:53:40

您应该自定义 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; }

you should customize the css file. class are:

.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; }

回复收藏 0 原文

~没有更多了~