问如果标题包含右对齐的文本，jQueryUI对话框将隐藏关闭(X)按钮。我怎么才能解决这个问题？
EN

Stack Overflow用户

提问于 2013-03-21 08:36:08

回答 1查看 3.4K关注 0票数 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>元素的<div>代码。

在jQueryUI的早期版本(例如V1.8.20)中，我能够直接用myTitle的内容分配title属性，它的工作就像一种魅力。现在我升级到V1.10.2，注意到标题不再解释HTML，而是在标题中显示<div> ...。正如您所看到的，我正在使用经过调整的.siblings('.ui-dialog-titlebar').html(myTitle);来传递我的HTML代码，这基本上是有效的。

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

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

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

我已经到处找过了(从http://jqueryui.com/开始)，在谷歌搜索等等，但没有找到解决方案。

任何帮助都是非常感谢的。

更新：(对以下评论的答复)

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

最后注：

与你们的讨论帮助我很好地解决了这个问题。我贴出了最后对我有用的答案。

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

javascript

html

jquery-ui-dialog

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-22 01:57:58

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

但以下功能可以做到这一点：

// 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代码。

N.B. (一些背景信息)：这个解决方案是受以下Stackoverflow文章的启发：jQueryUI对话框标题中的图标。

我发现造成这种行为的原因是jQuery团队对对话框中的XSS漏洞有顾虑，所以他们故意更改它。

如果你有兴趣的话，你可以读到更多关于他们讨论这里的信息。因此，_title是jQuery提供的官方功能，如果您想在标题中使用HTML的话。我相信他们选择了一种不像.dialog({ title: $("... html ...") })那样简单的方法，我个人会更喜欢这种方法(即使用$来表示您想要在标题中使用HTML )。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15553143

复制

在 PHP 中如何解码 JSONP

php jsonp 函数接口数据

如果是 JSON 数据，使用 json_decode 这个 PHP 函数就能解码，但是有些数据接口只提供了 JSONP 数据如何解码呢？

Denis

2023/04/15

7060

Python3 中文在URL中的编码解码