Javascript jQuery UI 对话框标题中的图标

Icons in jQuery UI dialog title

提问by solipps

I'm using the code below to create a jQuery dialog box. By default there is a close icon on title bar, but I want to add some of the other icons in title bar as well for different functionality.

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

The code used for the dialog box is:

对话框使用的代码是：

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

I'm using following .css and .js files:

我正在使用以下 .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>

回答by Yi Jiang

You can define HTML in the titleoption when creating the dialog box. Therefore, using the existing jQuery UI icon sprites, we can use this Javascript:

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

---

---

For jQuery UI 1.10.0

对于 jQuery UI 1.10.0

You need to override the undocumented _titlefunction, according to Bug #6016to ensure that the titleattribute is not escaped.

_title根据错误 #6016，您需要覆盖未记录的函数，以确保该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');

For older versions

对于旧版本

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

---

---

And this CSS

还有这个 CSS

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

To add an icon to the title of the dialog. You can see the complete set of jQuery UI icons here: http://jqueryui.com/themeroller/

将图标添加到对话框的标题。您可以在此处查看完整的 jQuery UI 图标集：http: //jqueryui.com/themeroller/

To see this working, live, see: http://jsfiddle.net/XkSu9/(jQuery UI 1.10+) or http://www.jsfiddle.net/yijiang/UYMJH/(old version)

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

回答by Minh Nguyen

You can do that by adding some HTML code to title bar when dialog opened.

您可以通过在对话框打开时向标题栏添加一些 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');
            }
        });
    });

回答by Rob

A much simpler method. In the stylesheet:

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

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

This is for a 16x16 image.

这是用于 16x16 图像。

回答by Zectbumo

Here is how you solve the jQuery UI 1.10.0 dialog title issue globally instead of one object at a time:

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

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

Now use the dialog widget as usual and your titles won't get escaped anymore.

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

回答by Youkko

I did it this way:

我是这样做的：

<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>

Usage: MsgBox("Hello, I'm a MessageBox!", "Title Here", 400, 200);

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

Or

或者

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

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

You may improve it with ui-icons as well...

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