加载回调后jQuery ui对话框更改标题答案

【问题标题】：jQuery ui dialog change title after load-callback加载回调后jQuery ui对话框更改标题
【发布时间】：2011-01-11 10:06:39
【问题描述】：

我喜欢在此 UI 对话框中提交表单后更改 UI 对话框的标题。所以在load 之后的回调函数中我应该建议，但我已经尝试过并在谷歌上搜索没有结果。

有人有想法吗？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-dialog

【解决方案1】：

更好！

    jQuery( "#dialog" ).attr('title', 'Error');
    jQuery( "#dialog" ).text('You forgot to enter your first name');

【讨论】：

第一行不会改变对话框的标题。 jQuery UI 对话框中没有这样的属性。第二个将更改对话框本身的内容，但这不是用户所要求的。假设 yoru 对话框的 id 是 #dialog。

【解决方案2】：

我找到了更简单的解决方案：

$('#clickToCreate').live('click', function() {
     $('#yourDialogId')
         .dialog({
              title: "Set the title to Create"
         })
         .dialog('open'); 
});


$('#clickToEdit').live('click', function() {
     $('#yourDialogId')
         .dialog({
              title: "Set the title To Edit"
         })
         .dialog('open'); 
});

希望有帮助！

【讨论】：

【解决方案3】：

我尝试实现 Nick 的结果是：

$('.selectorUsedToCreateTheDialog').dialog('option', 'title', 'My New title');

但这对我不起作用，因为我在一页上有多个对话框。在这种情况下，它只会在第一次正确设置标题。尝试装订命令不起作用：

    $("#modal_popup").html(data);
    $("#modal_popup").dialog('option', 'title', 'My New Title');
    $("#modal_popup").dialog({ width: 950, height: 550);

我通过将标题添加到页面上每个对话框的 javascript 函数参数来解决此问题：

function show_popup1() {
    $("#modal_popup").html(data);
    $("#modal_popup").dialog({ width: 950, height: 550, title: 'Popup Title of my First Dialog'});
}

function show_popup2() {
    $("#modal_popup").html(data);
    $("#modal_popup").dialog({ width: 950, height: 550, title: 'Popup Title of my Other Dialog'});
}

【讨论】：

【解决方案4】：

使用对话框方法：

$('.selectorUsedToCreateTheDialog').dialog('option', 'title', 'My New title');

或者直接，虽然很hacky：

$("span.ui-dialog-title").text('My New Title');

为了将来参考，您可以使用 jQuery 跳过 google。大多数时候，jQuery API 会回答你的问题。在这种情况下，Dialog API page。主库：http://api.jquery.com

【讨论】：

请注意，上面的“hacky”版本会更改页面上所有对话框的标题（如果您创建了多个对话框）。
我可以通过多个选项吗？
@themis 在当前版本中有一个.option() 方法也接受一个对象，见options(options) 这里：api.jqueryui.com/dialog/#method-option
$("#dialog").dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } , 关闭: function () {; }, title:"test" }).dialog("open");
由于我的回答还是很受关注的，所以我也贴在这里..stackoverflow.com/a/17745795/1315125

【解决方案5】：

Nick Craver 改进了将自定义 HTML 放入 jquery 对话框标题的 hacky 想法：

var newtitle= '<b>HTML TITLE</b>';
$(".selectorUsedToCreateTheDialog").parent().find("span.ui-dialog-title").html(newtitle);

【讨论】：

我宁愿在不需要的时候不做 hacky，并且已经有一种 jquery 认可的方法来设置 HTML 标题：覆盖 _title 方法。这个 SO 答案已经涵盖了它：stackoverflow.com/questions/14488774/…