1

我希望这不会浪费任何人的时间......我已经研究并尝试了几个小时的不同解决方案，但无法让它发挥作用。

我正在使用 jQuery UI 1.10.1。我想在标题中添加一个图标。以下代码不适用于版本 1.10.1：

$("#dialog").dialog(
{
    title: '<span class="ui-icon ui-icon-home"></span> Example Dialog'
});

因此，我使用以下代码作为解决方法：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
            {
                var eventDialog = $("#createEventForm").dialog();

                eventDialog.data("uiDialog")._title = function(title) 
                {
                    title.html(this.options.title);
                };

                eventDialog.dialog(
                {
                    title: "<span class=\"ui-icon ui-icon-pencil\" style=\"float: left; margin-right: 4px;\"></span> New Appointment",
                    modal: true,
                    autoOpen: false,
                    width: "auto",
                    buttons: [
                    {
                        text: "Save",
                        'click': function()
                        {
                            // do something with .ajax in here
                        },
                        icons: { primary: 'ui-icon-plus'}
                    },
                    {
                        text: "Cancel",
                        'click': function()
                        {
                            $(this).dialog("close");
                        },
                        icons: {primary: 'ui-icon-cancel'}
                    }]
                });
            });
</script>

现在图标像我想要的那样在标题栏中，但是“modal”和“autoOpen”选项被忽略了。“宽度”和“按钮”选项按预期工作。

实际上，它们仅在页面加载时被忽略。如果我关闭对话框，然后单击在我的 html 中触发它的按钮，那么当对话框再次打开时，所有选项都会产生预期的效果。

4

0 回答 0