1

我有以下代码示例：

<div id="dlgTest1" style="display: none">
    <p>
        Lorem ipsum test popup dialog<br />
        <br />
        Click the OK button to resume activity.
    </p>
</div>
<script type="text/javascript">
$(document).ready(function () {
        var myTitle = 
        "<div style='float: left'>LEFT TEXT</div><div style='float: right'>RIGHT TEXT</div>";
        $("#dlgTest1").dialog({
            title: '', //  new jquery-ui-1.10.2 doesn't allow HTML here
            autoOpen: false,
            minWidth: 500, width: 500,
            minHeight: 200, height: 200,
            resizable: true,
            modal: true,
            show: "blind",
            hide: "explode",
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                }
            }
        }).siblings('.ui-dialog-titlebar').html(myTitle); // title goes here
        $("#dlgTest1").dialog("open").dialog("moveToTop");
});
</script>

此示例代码打开一个 jQuery 对话框，该对话框在左侧和右侧的标题栏中显示文本，这是通过myTitle一个包含两个<div>元素的 HTML 代码的变量来实现的。

在以前的 jQueryUI 版本（例如 V1.8.20）中，我能够直接将 title 属性指定为的内容，myTitle它就像一个魅力。现在我已经升级到 V1.10.2 并注意到标题不再解释 HTML，而是<div> ...在标题中显示。正如你所看到的，我正在使用调整.siblings('.ui-dialog-titlebar').html(myTitle);来传递我的 HTML 代码，这基本上是有效的。

但它的副作用是它隐藏了用于关闭对话框的 (X) 按钮（在旧的 jQUery UI V1.8.20 版本中没有出现这种副作用）。我无法回到早期版本的 jQueryUI，因为我需要依赖于最新版本的控件。

问题：如何避免 (X) 关闭按钮被右对齐文本隐藏？

注意：如果我使用普通文本而不是 HTML 格式的文本，则会显示图标，所以原因不是缺少样式或位图。

我已经到处寻找（从http://jqueryui.com/开始），在 Google 等中搜索，但没有找到解决方案。

任何帮助深表感谢。

更新：（回答下面的评论）

  • 我正在使用ui-lightness css 主题，没有任何修改
  • 添加padding-right:20px到style右对齐的属性div并不能解决问题。

最后说明：

与大家的讨论对我解决问题有很大帮助。我已经发布了最终对我有用的答案。

非常感谢所有支持我的人，你们真的很棒！每个发布答案的人都得到了我的 +1。

4

2 回答 2

1

问题是您正在替换标题栏的 html，因此您正在删除关闭按钮。

更改html()为append()，您将需要调整边距/填充以使其看起来正确。

var myTitle = 
    "<div style='float: left'>LEFT TEXT</div><div style='float: right; margin-right:10px;'>RIGHT TEXT</div>";

和

}).siblings('.ui-dialog-titlebar').append(myTitle);

JSFiddle

于 2013-03-21T16:44:21.783 回答
1

Epascarello 建议的方法.append(myTitle) 不是 .html(myTitle)在 JSFiddle 示例中正常工作，但不幸的是ui-lightness，不适用于我正在使用的 jQueryUI 的自定义。

但是下面的函数做到了：

// Insert HTML formatted title in jQuery dialog V1.10.2
// Parameters: 
// dialog = reference to jQueryUI dialog, 
// hmtlTitle = the title with containing HTML to apply to dialog
function applyHtmlToDialog(dialog, htmlTitle) {
    dialog.data("uiDialog")._title = function (title) { 
            title.html(this.options.title); };
    dialog.dialog('option', 'title', htmlTitle);
}

要使用它，只需按以下方式调用它：

applyHtmlToDialog($("#dlgTest1").dialog(), myTitle);

或者，如果您更喜欢在多行中执行此操作：

var myDiag = $("#dlgTest1").dialog(//... your dialog definition ...
                                    );
var myTitle = '<div> ... </div>'; 
applyHtmlToDialog(myDiag, myTitle);

它将myTitle正确插入并考虑其中包含的 HTML 代码。

注意（一些背景信息）：此解决方案的灵感来自以下 Stackoverflow 文章： jQueryUI 对话框标题中的图标。

我发现这种行为的原因是 jQuery 团队担心对话框的 XSS 漏洞，所以他们故意更改了它。

如果您有兴趣，可以在此处阅读有关他们讨论的更多信息。因此，_title如果您想在标题中使用 HTML 代码，这是 jQuery 提供的官方功能。我相信他们选择了一种不那么简单的方法，就像.dialog({ title: $("... html ...") })我个人更喜欢的那样（即使用 $ 表示您希望在标题中包含 HTML）。

于 2013-03-22T09:57:58.113 回答