jQuery UI 对话框标题中的图标

Posted 2023-03-06

【中文标题】jQuery UI 对话框标题中的图标

【英文标题】：Icons in jQuery UI dialog title

【发布时间】：2011-05-05 11:23:44

【问题描述】：

我正在使用下面的代码来创建一个 jQuery 对话框。默认情况下，标题栏上有一个关闭图标，但我想在标题栏中添加一些其他图标以实现不同的功能。

对话框使用的代码是：

$("document").ready(function () 
    $("#dialog").dialog(
        title: "Dialog Title",
        height: 400,
        width: 500
    );
);

我正在使用以下 .css 和 .js 文件：

<link type="text/css" href="jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.3.custom.min.js"></script>

【参考方案1】：

您可以在创建对话框时在title 选项中定义html。因此，使用现有的 jQuery UI 图标精灵，我们可以使用这个 Javascript：

---

对于 jQuery UI 1.10.0

您需要根据Bug #6016 覆盖未记录的_title 函数，以确保title 属性不会被转义。

var dialog = $("#dialog").dialog();

dialog.data( "uiDialog" )._title = function(title) 
    title.html( this.options.title );
;

dialog.dialog('option', 'title', '<span class="ui-icon ui-icon-home"></span> Example Dialog');

对于旧版本

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

---

还有这个 CSS

.ui-dialog .ui-dialog-title .ui-icon 
    float: left;
    margin-right: 4px;

在对话框的标题中添加一个图标。你可以在这里看到完整的 jQuery UI 图标集：http://jqueryui.com/themeroller/

要查看此功能，请参阅：http://jsfiddle.net/XkSu9/（jQuery UI 1.10+）或http://www.jsfiddle.net/yijiang/UYMJH/（旧版本）

【讨论】：

这在 jqueryui-1.10.0 中不起作用。它将转义 html。

@YoniBaciu 这很有趣，因为文档仍然说任何有效的 HTML 都可以用作标题：api.jqueryui.com/dialog/#option-title。让我检查一下这是错误还是文档已过时

此处更改为github.com/jquery/jquery-ui/commit/… 以“防止XSS 漏洞”，修复此错误：bugs.jqueryui.com/ticket/6016。不幸的是，开发人员似乎未能正确更新文档。

它在 jQueryUI V1.10.2 上运行良好，感谢您提供见解。 注意如果您将代码 sn-p 封装在一个函数中，您可以简化您的生活，正如我在 here 中展示的那样。

对于 jQuery UI 1.10.x，您可以通过用 answer 的函数覆盖 $.ui.dialog.prototype._title 来全局应用此行为。

【参考方案2】：

您可以通过在对话框打开时向标题栏添加一些 HTML 代码来做到这一点。

$("document").ready(function () 
        $("#dialog").dialog(
            title: "Dialog Title",
            height: 400,
            width: 500,
            open: function(event, ui)
                $(this).parent().find('.ui-dialog-titlebar').append('Some HTML');
            
        );
    );

【参考方案3】：

一个更简单的方法。在样式表中：

.ui-dialog .ui-dialog-title 
  background-image: url('/icons/info.png');
  background-repeat: no-repeat;
  padding-left: 20px;

这是一张 16x16 的图片。

【参考方案4】：

以下是您如何全局解决 jQuery UI 1.10.0 对话框标题问题，而不是一次解决一个对象：

jQuery.widget('ui.dialog', jQuery.extend(, jQuery.ui.dialog.prototype, 
    _title: function(titleBar) 
        titleBar.html(this.options.title || ' ');
    
));

现在像往常一样使用对话框小部件，您的标题将不再被转义。

【参考方案5】：

我是这样做的：

<script type="text/javascript" language="javascript">
    function MsgBox() 
        var arg = arguments;
        /*
        [arg]
        0 = message
        1 = title
        2 = width
        3 = height
        4 = command to evaluete if Ok is clicked (optional)
        */
        $("body").append("<div id=\"dlgMsg\" title=\"" + arg[1] + "\">" + arg[0] + "</div>");
        $("#dlgMsg").dialog(
            autoOpen: false,
            modal: true,
            bgiframe: true,
            width: arg[2],
            height: arg[3],
            close: function (event, ui)  $(this).dialog("destroy").remove(); ,
            buttons: 
                    'OK': function ()  if (arg[4]) eval(arg[4]); $(this).dialog("close"); 
                    
        );

        $("#dlgMsg").dialog('open');
        return false;
    
</script>

用法： MsgBox("Hello, I'm a MessageBox!", "Title Here", 400, 200);

或者

MsgBox("Hello, I'm a MessageBox!", "Title Here", 400, 200, "alert('hey, you clicked Ok!')");

您也可以使用 ui-icons 来改进它...