jQuery UI对话框在加载回调后更改标题


Answers:


258

使用对话框方法:

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

还是直接,hacky:

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

为了将来参考,您可以使用jQuery跳过google。jQuery API通常会回答您的问题。在这种情况下,对话框API页面。对于主库:http : //api.jquery.com


8
请注意,上面的“ hacky”版本将更改页面上所有对话框的标题(如果您创建了多个对话框)。
camainc

1
我可以通过多个选项吗?
themhz 2013年

3
@themis在当前版本中,还有一种.option()方法也可以使用对象,请参见options(options)此处:api.jqueryui.com/dialog/#method-option
Nick Craver

$(“#dialog”)。dialog({autoOpen:false,show:{效果:“ blind”,持续时间:1000},hide:{效果:“ explode”,持续时间:1000},close:function(){; },标题:“ test”})。dialog(“ open”);
WhiteWolfza

由于我的回答仍然受到广泛关注,因此我也将其发布在这里。stackoverflow.com
17745795/

14

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

$('#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 Craver)对骇客想法的增强,将自定义HTML放入jquery对话框标题中:

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

我宁愿不要在没有必要的情况下变态,而且已经有一种jquery认可的方法来设置HTML标题:覆盖_title方法。它已经包含在本SO答案:stackoverflow.com/questions/14488774/...
cincodenada

2

我试图实现尼克的结果是:

$('.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'});
}

0

更好!

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

第一行不会更改对话框标题。jQuery UI对话框中没有此类属性。第二个将更改对话框本身的内容,但这不是用户要的。前提id是yoru对话框的#dialog
佩雷
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.