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

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

jQuery 환경 준비

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

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

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

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

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

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

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

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

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

< /div>


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

관련 라벨：

dialog jquery

원천：php.cn

이전 기사：JS는 select(샘플 코드)_javascript 기술에서 Option 개체를 동적으로 추가하고 삭제합니다. 다음 기사：javascript_javascript 기술에서 typeof를 사용하는 예

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...

에서 2024-04-05 09:26:49

0

1

1418

최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...

에서 2024-04-04 18:40:04

0

1

3528

북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...

에서 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...

에서 2024-04-04 12:53:48

0

1

303

관련 주제

더>

• jquery 플러그인이란 무엇입니까?
• jquery로 json을 조작하는 방법
• Jquery에서 요소를 삭제하는 방법
• jQuery hover() 메소드 사용
• jquery는 페이징 방법을 구현합니다.
• Jquery의 숨겨진 요소는 무엇입니까?
• jquery에서 강조표시되는 내용
• NVIDIA에 연결할 수 없는 문제를 해결하는 방법