jquery-ui 대화 상자 : 대화 상자의 단추를 기본 작업으로 설정 (Enter 키)
jquery 모달 대화 상자에서 단추를 기본 작업 (사용자가 Enter 키를 누를 때 실행할 작업)으로 선택하는 방법이 있습니까?
jquery 웹 사이트의 예 : jquery 대화 상자 모달 메시지
위의 예에서 사용자가 Esc 키를 누르면 대화 상자가 닫힙니다. 사용자가 Enter 키를 누를 때 "확인"버튼 동작을 호출하고 싶습니다.
대화 상자의 열기 기능에서 버튼에 초점을 맞출 수 있습니다.
$("#myDialog").dialog({
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
:eq(0)다른 색인에 있거나 이름으로 찾기 등 의 경우 변경하십시오 .
나는 (텍스트 상자) 내가 원하는 곳에 초점을 두는 (나를 위해 일하고 있음) 이것을 좋아합니다.
$("#logonDialog").keydown(function (event) {
if (event.keyCode == $.ui.keyCode.ENTER) {
$(this).parent()
.find("button:eq(0)").trigger("click");
return false;
}
});
그러나 이것은 하나의 버튼 (Ok 버튼)에 대해서만 작동합니다. 필요한 경우 ': eq (n)'을 설정하여 다른 버튼을 선택할 수 있습니다.
참고 : Enter 키를 처리 할 때 이벤트 버블 링을 방지하기 위해 false를 반환하는 새 줄을 추가했습니다. 이전보다 도움이되기를 바랍니다.
이 방법을 시도하십시오.
$("#myDialog").dialog({
open: function() {
$(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus();
}
});
이 다른 stackoverflow 질문 은 원하는 곳으로 이동합니다.
$('#DialogTag').keyup(function(e) {
if (e.keyCode == 13) {
//Close dialog and/or submit here...
}
});
대화 상자의 모든 버튼을 더 잘 제어 할 수있는 또 다른 옵션은 버튼 배열로 추가하는 것입니다. 그런 다음 열기 이벤트 에서 ID로 버튼을 얻고 원하는대로 할 수 있습니다 ( 초점 설정 포함 )
$('#myDialog').dialog({
buttons: [
{
id: "btnCancel",
text: "Cancel",
click: function(){
$(this).dialog('close');
}
},
{
id: "btnOne",
text: "Print One",
click: function () {
SomeFunction(1);
}
},
{
id: "btnTwo",
text: "Print Two",
click: function(){
SomeFunction(0);
}
}
],
open: function () {
if ($('#hiddenBool').val() != 'True') {
$('#btnOne').hide();
}
$("#btnTwo").focus();
}
});
버튼 이름을 선택기로 사용하는 약간의 변형. 읽기가 조금 더 좋지만 버튼 텍스트 문자열에 명백한 중복이 있습니다. 취향에 맞게 리팩토링하십시오.
$("#confirm-dialog").dialog({
buttons: {
"Cancel" : function(){},
"OK" : function(){}
},
open: function() {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('OK')").focus();
}
});
가장 간단한 방법은 대화 상자 내의 양식에 제출 작업을 사용하는 것입니다.
- 나는 대화 상자 내에서 양식을 요구하고 싶지 않았습니다 (NB마다 다른 브라우저는 Enter 키를 다르게 처리하고 일부는 항상 입력시 제출하지 않습니다).
- 사용자가 Enter 키를 누르기 전에 제목 창이나 단추 창을 클릭하면이 기능이 작동하기를 원했습니다.
- 모든 jQueryUI 대화 상자에 사용할 수있는 라이브러리 메서드를 만들고 싶었습니다.
내가 일하는 회사는 'EBL'이고 글로벌 범위를 피하므로 아래 기능의 접두어를 사용합니다.
EBL.onUiDialogOpen = function (event, ui, hideX, actionFirstButtonOnEnterKey) {
if (hideX) {
// There is no option to hide the 'X' so override.
$(".ui-dialog-titlebar-close").hide();
}
if (actionFirstButtonOnEnterKey) {
/* (event.target) will give the div that will become the content
of a UI dialog, once div is 'opened' is it surrounded by a
parent div that contains title and buttonpane divs as well as
content div - so I use .parent()
...The keyup function is binded to all descendants, therefore:
-We need the e.stopPropagation() line.
-This code is NOT what you want if you DON'T want enter
key to initiate first button regardless of selected control.
*/
$(event.target).parent().bind('keydown.justWhileOpen', function (e) {
if (e.keyCode === $.ui.keyCode.ENTER) {
e.stopPropagation();
$(event.target).next('.ui-dialog-buttonpane')
.find('button:first').click();
}
});
}
};
... 다음과 함께 작동합니다.
EBL.onUiDialogClose = function (event, ui) {
// Remove keyup handler when we close dialog
$(event.target).parent().unbind('.justWhileOpen');
};
동적으로 생성 된 div를 사용하고 나중에 삭제하는 경우 .onUiDialogClose가 필요하지 않습니다.
비 동적 대화 상자를 초기화 할 때 이러한 라이브러리 함수를 사용하는 방법을 아래에서 볼 수 있습니다.
$('#divName').dialog({
//...
open: function (event, ui) { EBL.onUiDialogOpen(event, ui, false, true); },
close: function (event, ui) { EBL.onUiDialogClose(event, ui); },
//...
});
지금까지 IE9 및 최신 크롬 / 파이어 폭스에서 이것을 테스트했습니다. '확인'기능에서 필요에 따라 대화 상자의 유효성을 검사해야합니다.
버전 1.10.0을 사용하고 있습니다. 나는 그것을 개방적이면서도 집중적으로 작동하도록 할 수 없었다. 두 번째 버튼에 초점을 맞 춥니 다.
focus: function(){
$(this).siblings('.ui-dialog-buttonpane').find('button:eq(1)').focus();
}
$("#logonDialog").keydown(function (event) {if (event.keyCode == 13) {
$(this).parent().find("button:eq(0)").trigger("click");
return false;
}
});
이것은 jquery 1.10.2를 사용하는 대화 상자에서 나를 위해 일했습니다.
dialog({
focus: function() {
$(this).on("keyup", function(e) {
if (e.keyCode === 13) {
$(this).parent().find("button:eq(1)").trigger("click");
return false;
}
});
},
더 많은 옵션 ...
이 간단한 코드는 버튼의 스타일을 지정하고 기본값을 마지막으로 설정합니다.
open: function(){
$buttonPane = $(this).next();
$buttonPane.find('button:first').addClass('accept').addClass('ui-priority-secondary');
$buttonPane.find('button:last').addClass('cancel').addClass('ui-state-default');
$buttonPane.find('button:last').focus();
},
내가 전화 때문에 내 경우에는, 답변 아무도 일하지 .dialog빈 DIV에 내 버튼을 추가 동적 (가), 그래서 $(this).html()아무것도 돌려주지 않는 것입니다. 그래서 나는 parent()또는 같은 메소드를 호출 할 수 없었고 siblings()그 대가로 무언가를 기대할 수 없었다 . 내가 한 것은 ui-dialog-buttonpane클래스를 직접 선택하고 거기에서 버튼 요소를 찾는 것입니다.
HTML
<div id = "dialogexample">
</div>
Jquery
$("#dialogexample").dialog({
autoOpen: false,
modal: true,
open: function () {
$('.ui-dialog-buttonpane').find('#otherbutton').focus();
}
});
var buttons = {
"MyButton" : {
text: "Do Stuff",
id: "dostuffbutton"
},
"OtherButton" : {
text: "Other Stuff",
id: "otherbutton"
}
}
$("#dialogexample").dialog("option", "buttons", buttons);
$("#dialogexample").dialog("open"); //the second (otherbutton), instead of
//the first (dostuffbutton) button should be focused
나는 이것이 오래된 스레드라는 것을 알고 있지만 정확한 기능을 찾고 있었고 위의 모든 것이 조금 부족하다는 것을 알았 기 때문에 최고의 솔루션이라고 생각하는 것을 구현할 수있었습니다.
It is a combination of two answers above. Using an ID rather than relying on the find() function to find the button element always seems to be a much better choice to me.
Also explicitly looking for the enter key to be pressed allows us to set focus to whatever element we want when the dialog is opened if desired. This just seems to allow for the most flexibility while satisfying the desire of triggering a specific button as 'default' when the enter key is pressed. I have also implemented a 'cancel' default as well.
I hope this helps others looking for a good 'default' button solution for dialogs.
$("#LoginBox").dialog({
open: function(){
$(this).keydown(function (event) {
if (event.keyCode == 13) {
$("#LogInButton").trigger("click");
return false;
}
if (event.keyCode == 27) {
$("#CancelButton").trigger("click");
return false;
}
});
},
close: function(){
$(this).dialog("destroy");
},
buttons: [
{
id: "LogInButton",
text: "Log In",
click: function(){
//button functionality goes here
$(this).dialog("destroy");
}
},
{
id: "CancelButton",
text: "Cancel",
click: function(){
$(this).dialog("destroy");
}
}
]
});
You should to use :tabbable selector and index of your button (0 is [X] button, yours started from 1)
open: function() {
var tb = $(":tabbable", this.parentNode);
if(tb.length>1) {
tb[1].focus();
}
}
ReferenceURL : https://stackoverflow.com/questions/2522125/jquery-ui-dialog-make-a-button-in-the-dialog-the-default-action-enter-key
'IT story' 카테고리의 다른 글
| MySQLnd가 활성 드라이버인지 확인하는 방법은 무엇입니까? (0) | 2021.01.06 |
|---|---|
| C #에서 내 자신의 예외를 어떻게 정의합니까? (0) | 2021.01.06 |
| 개미 빌드 스크립트에서 최신 git 커밋 해시를 찾는 방법 (0) | 2021.01.06 |
| .NET에서 대용량 (1GB) txt 파일을 읽는 방법은 무엇입니까? (0) | 2021.01.06 |
| Google Analytics로 페이지와 같은 해시 링크를 추적 할 수 있습니까? (0) | 2021.01.06 |