JQUERY 대화상자_jquery 사용법에 대한 상세 분석

오늘은 클라이언트 측 대화 상자를 사용하고 jQuery UI의 대화 상자에 대해 배웠습니다.

jQuery 환경 준비

먼저 버튼을 만듭니다. 이 버튼을 클릭하면 대화 상자가 나타납니다.

이 버튼의 클릭 이벤트를 설정하기 위해서는 jQuery 환경을 준비해야 합니다.

버튼의 클릭 이벤트를 준비 상태로 설정합니다.

코드 복사 코드는 다음과 같습니다.

$(function() {
// 초기화
$("#btn").click(function() {
Alert("btn이 클릭되었습니다!");
}
);

확인 이 단계에서는 문제가 없습니다. 대화 상자 준비

두 번째 단계는 대화 상자의 내용을 준비하는 것입니다. 이 콘텐츠는 jQuery UI 데모 파일에서 가져온 것입니다.

코드 복사 코드는 다음과 같습니다.

                                                          ​ ;
이 항목은 영구적으로 삭제되며 복구할 수 없습니다. 정말요?



jQuery UI 대화 상자를 사용하려면 해당 파일에 대한 참조를 추가해야 합니다.

> ;


스타일 추가
jQuery UI에서 사용 많은 수의 스타일을 장식하려면 jQuery UI의 스타일을 참조해야 합니다. jquery.ui.all.css 파일은 다수의 다른 스타일 파일을 참조하므로 jQuery UI에서 development-bundlethemesbase 폴더의 내용을 복사합니다. .

ready 기능에서는 이 대화 상자도 초기화됩니다.

코드 복사 코드는 다음과 같습니다.

$(function() {

// 초기화
$("#btn").click(function() {
Alert("btn이 클릭되었습니다!");
});

// 초기화 대화 상자
$("#dialog-confirm").dialog();
});


이제 이 페이지를 열면 이미 대화 상자를 볼 수 있습니다.

버튼을 통해 대화상자 팝업페이지 초기화 시에는 이 대화상자가 보이지 않고, 버튼을 클릭하면 다시 나타나기를 바랍니다. 그런 다음 이러한 작업이 필요합니다.

먼저 기본적으로 표시되지 않는 대화상자에 스타일을 추가하세요. style="display: none"이므로 이 부분은 기본적으로 표시되지 않습니다.

코드 복사 코드는 다음과 같습니다.

 

  
이 항목은 영구적으로 삭제되며 복구할 수 없습니다. 계속하시겠습니까?

그러면 초기화 대화상자가 표시되지 않고 초기화 작업만 완료됩니다.

대화 상자를 초기화할 때 매개변수 autoOpen을 전달합니다. false

코드 복사 코드는 다음과 같습니다.

클릭 이벤트의

$("#dialog-confirm").dialog(
{
autoOpen: false
}
);

버튼을 누르면 이 대화 상자가 나타납니다.

코드 복사 코드는 다음과 같습니다.

$("#btn").click (function( ) {
// Alert("btn이 클릭되었습니다!");
$("#dialog-confirm").dialog("open");
});

close를 통과하면 대화 상자가 닫힙니다.

모달 대화 상자 구현
실제 응용 프로그램에서는 웹에서 기본 요소를 차단하고 모달 효과를 시뮬레이션하기 위해 마스크 레이어를 추가해야 하는 경우가 많습니다. 대화 상자를 초기화하고 모달 매개변수를 전달하면 true가 됩니다. 수정된 초기화 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(" #dialog -confirm").dialog(
{
modal: true, // 모달 대화 상자 만들기
autoOpen: false, // 초기화만 하고 표시하지 않음
}
) ;

대화 상자에 버튼 추가
대화 상자에 버튼을 추가하고 버튼의 이벤트 처리를 사용자 정의할 수 있습니다. 먼저 확인과 취소라는 두 개의 버튼을 추가하고 먼저 대화 상자를 닫도록 합니다.

코드 복사 코드는 다음과 같습니다.

// 초기화 대화 상자
$ ("# 대화 상자 확인").dialog(
{
모달: true, "Ok": function() {
             $(this).dialog('close');
                                     > }
})