jQuery를 사용하여 경고 생성
이 튜토리얼은 jQuery 경고 생성 또는 추가에 초점을 맞출 것입니다. 빠른 대답은 jQuery alert()를 사용하고 감시에 표시할 콘텐츠를 매개변수로 제공하는 것입니다.
jQuery를 사용하여 경고 생성
jQuery는 애플리케이션에서 다양한 작업을 실행하는 데 사용할 수 있는 몇 가지 편리한 메서드를 제공합니다. 소비자에게 알림을 표시하는 가장 우수한 방법 중 하나는 jQuery 경고 메시지를 사용하는 것입니다.
코드를 개발할 때 버튼을 누르거나 이벤트가 발생할 때 경고 메시지를 활용해야 합니다.
통사론:
Alert(Specify Content)
사용자는 content 매개변수의 경고 메시지 상자에 표시할 텍스트 내용을 지정해야 합니다.
예시:
<script>
$(document).ready(function () {
$("#alert-id").click(function () {
alert("Hello World! Welcome to upwork.");
});
});
</script>
출력:
버튼을 클릭하면 click() 함수가 트리거되고 일부 메시지가 표시된 팝업 창이 나타납니다.
jQuery에는 모달 경고를 생성하기 위한 내장 alert 구성 요소가 포함되어 있지 않지만 플러그인을 사용하여 웹 페이지에 멋진 jQuery 경고 상자를 구성할 수 있습니다.
플러그인을 사용하여 간단한 메시지가 포함된 기본 경고, 확인 버튼, 프롬프트 및 확인 경고와 같은 다양한 경고를 만드는 방법을 보여줍니다. 링크와 같은 HTML 구성 요소를 포함하는 신호의 예를 보려면 계속 읽으십시오.
jAlert 플러그인을 사용하여 경고 생성
jAlert 플러그인을 사용하여 다양한 경고 종류에 대한 다양한 매개변수로 경고를 생성할 수 있습니다. 예를 들어 경고를 닫고 여러 색상의 버튼을 사용하는 애니메이션이 있는 기본 경고 또는 확인 경고입니다.
이 플러그인은 최신 jQuery 버전과도 호환됩니다. 여기에서 최신 버전의 jAlert 플러그인을 다운로드할 수 있습니다.
경고 창을 닫는 Good 버튼을 포함하여 필수 jQuery 경고가 이 샘플에서 만들어집니다.
다음은 샘플 코드입니다. 파일을 저장하고 브라우저에서 실행할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jAlert.js"></script>
<link rel="stylesheet" href="jAlert.css" />
</head>
<body>
<h1>jQuery Alert</h1>
<div>
<button class="alertid">Simple jAlert</button>
</div>
<script>
$(".alertid").on("click", function (e) {
e.preventDefault();
var btn = $(this),
theme = "green";
$.jAlert({
title: "jAlert simple sample",
content: "Simple jAlert based on jQuery!",
theme: theme,
closeOnClick: true,
backgroundColor: "white",
btns: [{ text: "Good", theme: theme }],
});
});
</script>
</body>
</html>
theme 변수는 경고의 색상을 변경하는 데 사용됩니다. 다른 상황에서 다른 색상을 사용할 수 있습니다.
마찬가지로 사용자는 title 매개변수를 사용하여 경고 상자의 제목을 설정할 수 있습니다. content 매개변수에 표시할 메시지를 작성할 수 있습니다.
이 데모에서는 흰색 배경을 사용했습니다. 그러나 검은색을 사용할 수도 있습니다.
jAlert 플러그인 설정
인터넷 데모로 충분합니다. 웹 프로젝트에서 이 환상적인 플러그인을 사용하는 방법은 다음과 같습니다. 간단히 말해서 <head> 섹션에 플러그인 라이브러리를 포함해야 합니다.
첫 번째는 jQuery 라이브러리이고, 그 다음은 jAlert 버전 4용 JS 파일, 마지막으로 CSS 파일입니다.
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn