로드 콜백 후 jQuery UI 대화 상자 제목 변경


111

이 UI 대화 상자에서 양식을 제출 한 후 UI 대화 상자에서 제목을 변경하고 싶습니다. 그래서 load내가 제안해야 할 콜백 함수에서 결과없이 시도하고 봤습니다.

누구 아이디어가 있습니까?

답변:


258

대화 방법 사용 :

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

또는 직접적으로 해키 :

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

향후 참조를 위해 jQuery로 Google을 건너 뛸 수 있습니다. jQuery API는 대부분의 경우 질문에 답변합니다. 이 경우 Dialog API 페이지 입니다. 메인 라이브러리 : http://api.jquery.com


8
위의 "해키"버전은 페이지에있는 모든 대화 상자의 제목을 변경합니다 (여러 개를 만든 경우).
camainc

1
여러 옵션을 전달할 수 있습니까?
themhz

3
@themis 현재 버전에는 .option()객체를 취하는 메소드도 options(options)있습니다. 여기를 참조 하십시오. api.jqueryui.com/dialog/#method-option
Nick Craver

$ ( "# dialog"). dialog ({autoOpen : false, 표시 : {효과 : "블라인드", 기간 : 1000}, 숨기기 : {효과 : "폭발", 기간 : 1000}, 닫기 : function () {; }, title : "test"}). dialog ( "open");
WhiteWolfza

제 답변이 여전히 많은 관심을 받고 있기 때문에 여기에도 게시하겠습니다. stackoverflow.com/a/17745795/1315125
Igor L.

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가 jquery 대화 상자 제목에 사용자 정의 HTML을 추가하기 위해 해키 아이디어를 개선했습니다.

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

나는 할 필요가 없을 때 해키하지 않는 것을 선호하며 HTML 제목을 설정하는 jquery 승인 방법이 이미 있습니다. _title 메서드를 재정의합니다. 이미이 SO 답변에서 다룹니다. stackoverflow.com/questions/14488774/…
cincodenada

2

나는 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);

페이지에있는 각 대화 상자의 자바 스크립트 함수 인수에 제목을 추가하여이 문제를 해결했습니다.

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 대화 상자에는 이러한 속성이 없습니다. 두 번째는 대화 자체의 내용을 변경하지만 사용자가 요청한 것은 아닙니다. 그리고 그것은 idyoru 대화 상자가 #dialog.
페르
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.