HOWTO · jQuery
jQuery 확인
jQuery 확인은 경고, 대화 및 확인 기능을 포함한 다목적 기능을 보장하는 플러그인입니다. 또한 업데이트된 UI, 테마 및 더 많은 규칙을 허용합니다.
jQuery에서 확인 플러그인은 JavaScript 확인 기능과 유사한 기능으로 구성됩니다. 그러나 기본적으로 구별되는 특징은 jQuery $.confirm에는 기본 설정으로 변경할 수 있는 일부 속성(OK 및 취소 버튼 포함)이 있는 반면 JavaScript 확인은 엄격하고 최소 버튼은 변경할 수 없다는 것입니다. 변경됩니다.
즉, jQuery는 더 유연하다는 점에서 스포트라이트를 받습니다. 확인 작업은 JavaScript, jQuery 확인 플러그인 및 jQuery 대화 UI로 구현할 수 있습니다.
우리는 jQuery 확인 플러그인을 기반으로 하는 솔루션에만 집중할 것입니다.
로컬 PC에서 플러그인을 활성화하려면 CDN에 의존하거나 npm을 통해 패키지를 설치할 수 있습니다. 이 포털이 당신에게 딱 맞는 사용자 가이드가 될 수 있습니다.
예제 세트에서는 다양한 사용 사례 및 검사를 위해 CDN을 사용합니다.
확인을 위해 jQuery .$alert 사용
alert, dialog 및 confirm 작업 간의 기본적인 차이점에 따라 alert에는 OK라는 단일 버튼이 있습니다. 반대로 대화 상자는 사용자 지정된 콘텐츠 및 제목 값이 있는 기본 모달을 미리 봅니다.
이제 alert 유형 확인을 시각화해 보겠습니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<title>confirm</title>
<script>
$(function(){
$('#btn').click(function(e){
e.preventDefault();
$.alert({
title: 'Alert!',
content: 'Simple alert!'
});
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
출력:
확인을 위해 jQuery $.dialog 사용
dialog 작업의 기본 템플릿을 보고 제목과 내용을 변경합니다. dialog에는 버튼이 없으므로 기본 설정 메시지만 표시됩니다.
기본 콘텐츠로 돌아가려면 오른쪽 상단 모서리에 십자(x) 버튼이 있습니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<title>confirm</title>
<script>
$(function(){
$('#btn').click(function(e){
e.preventDefault();
$.dialog({
title: 'Dialog!',
content: 'Simple dialog!'
});
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
출력:
jQuery $.confirm을 사용하여 확인 확인
이와 관련하여 두 가지 버튼 옵션이 있습니다. 기본적으로 모든 확인 작업에 대해 텍스트는 확인 및 취소입니다.
그러나 여기에서 우리는 이러한 텍스트를 변경할 수 있는 권한이 있습니다. 또한 일부 다른 매개변수를 조작할 수 있습니다.
소개의 링크를 통해 최신 목록을 확인할 수 있습니다. 작업을 더 잘 보기 위해 예제를 확인해 봅시다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<title>confirm</title>
<script>
$(function(){
var ask = true;
$('#btn').click(function(e){
if(ask){
e.preventDefault();
$.confirm({
title: "Delete",
content: "You sure?",
buttons: {
confirm: {
text: "Yes",
action: function(){
ask = false;
alert("Deleted.");
}
},
cancel: {
text: "No"
}
}
});
}
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
출력:
집중해야 할 한 가지 사실은 모든 함수 $.alert(), $.confirm() 및 $.dialog()가 jconfirm() 함수의 일부라는 것입니다. 모두 사용 사례에 따라 서로 바꿔서 사용할 수 있습니다.
또한 jQuery 축소 js, jquery-confirm 축소 js 및 jquery-confirm 축소 css용 CDN을 사용했습니다. 예제를 참고하면서 버전 및 이후 업데이트를 확인하십시오.
