有时候在使用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> 确定",
"class" : "btn btn-danger btn-xs",
click: function() {
$( this ).dialog( "close" );
}
}
,
{
html: "<i class='ace-icon fa fa-times bigger-110'></i> 取消",
"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(" ");
} 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