让jQuery中对话框dialog的title支持html代码块

有时候在使用dialog对话框的时候，想让对话框的标题好看一点，例如设置个字体大小、颜色呀、加个图标呀什么的。在网上搜都说jQuery的dialog支持title为html，于是我也试了一下：

$( "#dialog-confirm" ).dialog({
    resizable: false,
    modal: true,
    title: "<div class='widget-header widget-header-small'><h4 class='smaller'>删除组员</h4></div>",
    title_html: true,
    buttons: [
        {
            html: "<i class='ace-icon fa fa-trash-o bigger-110'></i>&nbsp; 确定",
            "class" : "btn btn-danger btn-xs",
            click: function() {
                $( this ).dialog( "close" );
                
            }
        }
        ,
        {
            html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 取消",
            "class" : "btn btn-xs",
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
});

弹出来的样式如下：

发现html代码块没有生效，而是把代码块当成文本来显示了，原来jQuery1.10 将支持html格式的title功能去掉了，好像是为了防止脚本啥的。

要开启title的html功能，需要在当前页面的script标签里面加上一段js代码：

// 让对话框的标题支持html
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function(title) {
        if (!this.options.title ) {
            title.html("&#160;");
        } else {
            title.html(this.options.title);
        }
    }
}));

再试一次，效果如下：

这次终于好了，如果你的不生效，原因可能是这样的：有时为了代码复用，我们可能将一些共同的逻辑单独写到一个js文件中，然后每个页面加载一下这个js文件就行，但是如果这里你不生效，你就要考虑把上述js代码单独写到该页面，先别通过加载js文件，几层传递过来可能受影响

另外，我们也可能是这样打开对话框的：

$('#overTime').dialog("option","title", "加班申请").dialog('open');

那要支持html的title还可以这样：

$("#element").dialog({
  open: function() {
    $(this).find("span.ui-dialog-title").append("<span class='title'>" + subtitle + "</span>");
  }
});

另外我在网上下载前端素材时，看到别人在dialog的属性里面加了一个title_html:true这样的属性，我也试了，并没生效，在网上也搜不到这个属性，难道jQuery新出来的属性吗？

    title_html: true,

参考地址：https://stackoverflow.com/questions/14488774/using-html-in-a-dialogs-title-in-jquery-ui-1-10

让jQuery中对话框dialog的title支持html代码块

猜你喜欢