반응형
jQuery UI 대화 상자 버튼 텍스트를 변수로
누구든지 jQuery UI 대화 상자에서 버튼 텍스트에 변수를 어떻게 사용할 수 있는지 말해 줄 수 있습니까? 동적 버튼 이름을 만들고 싶습니다.
이것은 jQuery가 버튼 이름을 처리하는 방식으로 인해 작동하지 않습니다 (따옴표 포함 또는 제외 가능)
이것은 작동합니다 :
var button_name = 'Test';
var dialog_buttons = {};
dialog_buttons[button_name] = function(){ closeInstanceForm(Function); }
dialog_buttons['Cancel'] = function(){ $(this).dialog('close'); }
$('#instanceDialog').dialog({ buttons: dialog_buttons });
할 수있는 일은 대화 상자의 버튼에 ID를 할당 한 다음 표준 jQuery를 사용하여 조작하는 것입니다.
$("#dialog_box").dialog({
autoOpen: false,
modal: true,
resizable: false,
buttons: [{
text: "Ok",
"id": "btnOk",
click: function () {
//okCallback();
},
}, {
text: "Cancel",
click: function () {
//cancelCallback();
},
}],
close: function () {
//do something
}
});
버튼 텍스트 설정 :
var newLabel = "Updated Label";
$("#btnOk").html('<span class="ui-button-text">'+ newLabel +'</span>')
여기서 문제는 대화 플러그인이 버튼에 ID를 할당하지 않으므로 직접 수정하기가 매우 어렵다는 것입니다.
대신 대화 상자를 정상적으로 초기화하고 포함 된 텍스트로 단추를 찾은 다음 ID를 추가하십시오. 그런 다음 버튼에 직접 액세스하여 텍스트, 서식 변경, 활성화 / 비활성화 등을 수행 할 수 있습니다.
$("#dialog_box").dialog({
buttons: {
'ButtonA': function() {
//... configure the button's function
}
});
$('.ui-dialog-buttonpane button:contains(ButtonA)').attr("id","dialog_box_send-button");
$('#dialog_box_send-button').html('Send')
요점을 놓치고있을 수도 있지만 가장 쉬운 방법은 setter를 사용하는 것입니까?
$("#dialog_box").dialog({
buttons: {
[
text:"OK",
click: function() {
//... configure the button's function
}
]
});
$("#dialog_box").dialog("option", "buttons", { "Close": function() { $(this).dialog("close"); } });
$(function() {
// using textbox value instead of variable
$("#dialog").dialog({
width: 400,
buttons: [
{ text: $("#buttonText0").val(), click: function() { $(this).dialog("close"); } },
{ text: $("#buttonText1").val(), click: function() { $(this).dialog("close"); } }
]
});
$("#updateButtonText").on("click", function() {
var $buttons = $("#dialog").dialog("widget").find(".ui-dialog-buttonpane button");
console.log($buttons.get());
$buttons.eq(0).button("option", "label", $("#buttonText0").val());
$buttons.eq(1).button("option", "label", $("#buttonText1").val());
// few more things that you can do with button widget
$buttons.eq(0).button("option", "icons", { primary: "ui-icon-check" });
$buttons.eq(1).button("disable");
$("#dialog").dialog("open");
});
});@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="dialog" title="Sample Dialog">
<p>Proceed?</p>
</div>
<p style="text-align: center;">
<input type="text" id="buttonText0" value="OK">
<input type="text" id="buttonText1" value="Cancel">
<input type="button" id="updateButtonText" value="Update Button Text">
</p>이것은 작동합니다 $($("button", $("#dialogId").parent())[NUMBER_OF_YOUR_BUTTON]).text("My Text");
그리고 잊지 마세요
$($("button", $(".info_dialog").parent())[1]).html("<span class='ui-button-text'>Button text here.</span>");
이는 다음 단계에서 수행 할 수 있습니다.
- JavaScript에서는 버튼 배열을 만들 수 있습니다.
- 버튼 속성을 버튼 배열로 설정합니다.
다음 예제는 위의 단계를 설명합니다.
- btnArray에는 다음과 같이 두 개의 버튼이 정의되어 있습니다.
var btnArray = [ { text: "Add Entry", click: function(){ this.retVal = true; addRowIntoTemplateManifest(); $(this).dialog('close'); } }, { text: "Cancel", click: function(){ this.retVal = false; $(this).dialog('close'); } } ];
사용자 정의 함수 displayConfirmDialog_Dynamic ()은 Dialog header, Dialog Text, button Array에 액세스하도록 작성되었습니다. 이 함수에 대한 호출은 다음과 같습니다.
displayConfirmDialog_Dynamic("Add Template Manifest Entry?", "Do you want to add following Cuboid Entry to Template Manifest?\nCuboidNane: '" + json.cuboidName + "' CuboidId: " + json.cuboidId + "\non Server:"
+ json.serverUrl , btnArray );
displayConfirmDialog_Dynamic 함수는 다음과 같습니다.
//Confirmation dialog Dynamic Buttons
function displayConfirmDialog_Dynamic(dlgTitle, message, btnArray)
{
var retVal;
$("div#dialog-confirm").find("p").html(message);
var confirmDlg = $( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
title: dlgTitle,
buttons: btnArray,
show:{effect:'scale', duration: 700},
hide:{effect:'explode', duration: 700}
});
confirmDlg.dialog('option', 'buttons', btnArray);
confirmDlg.prev(".ui-dialog-titlebar").css({"background":"#ffc000", "color":"#ffffff", "font-size":"13px", "font-weight":"normal"}) ;
confirmDlg.dialog("open");
}
Confirm Dialog Template은 다음과 같이 DIV 태그로 정의됩니다. 태그 의 title및 내용은 <p>JavaScript 코드에 의해 동적으로 변경됩니다.
<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none;">
<p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
위 코드로 표시된 대화 상자의 스크린 샷은 다음과 같습니다.
var buttonName = "something";
$('#button-id').attr('value', buttonName);
버튼에 클래스를 할당합니다. 버튼 텍스트는 ui-button-text정의 된 클래스 내부에서 호출되는 클래스와 함께 범위에 있습니다 . 따라서 버튼에 클래스 .contacts-dialog-search-button를 제공하면 텍스트에 액세스하는 코드는 다음과 같습니다.
$('.ui-button-text','.contacts-dialog-search-button').text();
다음은 예제를 제공하기 위해 현재 프로젝트 버튼에 사용하는 코드입니다.
buttons : [
{
text : 'Advanced Search',
click : function(){
if($(this).dialog("option", "width")==290){
$('#contacts-dialog-search').show();
$(this).dialog("option", "width", 580);
$('.ui-button-text','.contacts-dialog-search-button').text('Close Search');
}
else{
$('#contacts-dialog-search').hide();
$(this).dialog("option", "width", 290);
$('.ui-button-text','.contacts-dialog-search-button').text('Advanced Search');
}
},
"class" : "contacts-dialog-search-button"
}
]
예 인라인 동작으로 완전히 가능합니다.
- 두 개의 setter 메서드 인 setYesButtonName () 및 setNoButtonName을 사용하여 Dialog 클래스를 만듭니다.
function ConfirmDialog() {
var yesButtonName = "Yes";
var noButtonName = "No";
this.showMessage = function(message, callback, argument) {
var $dialog = $('<div></div>')
.html(message)
.dialog({
modal: true,
closeOnEscape: true,
buttons: [
{
text:yesButtonName,
click: function() {
if (callback && typeof(callback) === "function") {
if (argument == 'undefined') {
callback();
} else {
callback(argument);
}
} else {
$(this).dialog("close");
}
}
},
{
text:noButtonName,
click: function() {
$(this).dialog("close");
}
}
]
});
$dialog.dialog("open");
};
this.setYesButtonName = function(name) {
yesButtonName = name;
return this;
};
this.setNoButtonName = function(name) {
noButtonName = name;
return this;
};
}
ConfirmDialog 클래스의 개체를 만듭니다.
this.CONFIRM_DIALOG = new ConfirmDialog();모든 이벤트에 대한 메서드 호출, onclick ()
OK_DIALOG.setYesButtonName('Wana Marry').showMessage('Worst Idea!!');
작업 완료 !!
왜 하나의 라이너 ...
$("span.ui-button-text:contains('OLD BUTTON NAME')").html('NEW BUTTON NAME');
참고URL : https://stackoverflow.com/questions/1464843/jquery-ui-dialog-button-text-as-a-variable
반응형
'program tip' 카테고리의 다른 글
| 분기 된 터미널에서 xcodebuild 실행 (0) | 2020.12.10 |
|---|---|
| 문자열에서 다음으로 변환 (0) | 2020.12.10 |
| 1 년 전부터 지금까지의 모든 레코드 선택 (0) | 2020.12.10 |
| 전체 디렉토리 경로없이 파일 이름 만 표시하려면 (0) | 2020.12.10 |
| 인터페이스 인스턴스 컬렉션을 역 직렬화 하시겠습니까? (0) | 2020.12.10 |