JQUERY/JALERT, JCONFIRM, JPROMPT 사용법
[ JQUERY ] JALERT, JCONFIRM, JPROMPT 사용법
정윤재
2011. 12. 16. 16:48
UI 가 수려한 자바 스크립트 alert , confirm, prompt 가 있어서
사용법을 정리 하여 보았다.
일단 어떻게 생긴 것인지 보자.
1. jalert
2. jconfirm
3. jprompt
사용법은 아래에 소스로 남겨 놓는다.
일단 http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
에서 다운로드 부터 받아야 한다.
예제 소스는 아래와 같다. 원하는 녀석의 주석을 풀고 테스트 해보면 감이 올 것이다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>JALERT 테스트</title>
<script src="../js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../js/jquery.alerts.js" type="text/javascript"></script>
<link href="../css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<script>
function jalertTest(){
alert('callback function test');
//jalert callback function
}
function jConfirmTest(r){
alert(r);
}
function jPromptTest(r){
alert(r+'::receive prompt message!!');
}
</script>
</head>
<body>
<script>
jAlert('This is a custom alert box', 'Alert Dialog',jalertTest);
//argument
//1. alert text
//2. alert title
//3. alert call back function
//jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r){jConfirmTest(r);});
//1.confirm box text
//2. confirm box title
//3. call back function
//jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
// if( r ) {
// jPromptTest(r);
// }
//});
//1. prompt box text
//2. prompt prefill value
//3. prompt box title
//4. prompt box call back function
</script>
</body>
</html>
사용법을 정리 하여 보았다.
일단 어떻게 생긴 것인지 보자.
1. jalert
2. jconfirm
3. jprompt
사용법은 아래에 소스로 남겨 놓는다.
일단 http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
에서 다운로드 부터 받아야 한다.
예제 소스는 아래와 같다. 원하는 녀석의 주석을 풀고 테스트 해보면 감이 올 것이다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>JALERT 테스트</title>
<script src="../js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../js/jquery.alerts.js" type="text/javascript"></script>
<link href="../css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<script>
function jalertTest(){
alert('callback function test');
//jalert callback function
}
function jConfirmTest(r){
alert(r);
}
function jPromptTest(r){
alert(r+'::receive prompt message!!');
}
</script>
</head>
<body>
<script>
jAlert('This is a custom alert box', 'Alert Dialog',jalertTest);
//argument
//1. alert text
//2. alert title
//3. alert call back function
//jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r){jConfirmTest(r);});
//1.confirm box text
//2. confirm box title
//3. call back function
//jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
// if( r ) {
// jPromptTest(r);
// }
//});
//1. prompt box text
//2. prompt prefill value
//3. prompt box title
//4. prompt box call back function
</script>
</body>
</html>