Home[ko]
불여우 스타일에 간단함을 추구하는 경고창 / 질문창 / 입력창!
(MIT License)
message : 경고 메시지
callback : 확인 버튼을 클릭하였을 경우 콜백 함수 정의
function(){
//'this' 키워드는 경고창 DOM을 참조합니다.
}
message : 질문 메시지
callback : 확인이나 취소를 클릭하였을 경우 콜백 함수 정의
function(bool){
//bool 변수로 확인을 클릭하면 true, 취소를 클릭하면 false 를 가져옵니다.
//'this' 키워드는 경고창 DOM을 참조합니다.
}
message : 입력창 메시지
value : 기본 입력값
callback : 확인이나 취소를 클릭하였을 경우 콜백 함수 정의
function(value){
//확인을 눌러야만 사용자가 입력한 입력값을 value 를 통해 가져올 수 있습니다.
//취소를 클릭할 경우 value 값은 undefined 가 됩니다. null 값이 아닙니다.
//'this' 키워드는 경고창 DOM을 참조합니다.
}
ispassword : 입력창이 비밀번호인지 여부
message : 경고창에 사용할 메시지 내용
options : 옵션을 지정합니다. 지정하지 않으면 기본 옵션이 적용됩니다.
submit : 버튼을 눌러 창을 빠져나간 뒤 실행되는 콜백 함수
confirm : true 로 지정하면 질문 창으로 변합니다.
input : true 로 지정하면 기본 입력창, 문자열 입력시 기본값이 들어간 입력창으로 변합니다. 원하지 않으면 이 속성을 아예 주지 마세요.
ok : 경고창의 확인 버튼의 내용을 정의합니다. 기본값은 $.msgbox.strings.ok
yes : 질문 및 입력창의 예 버튼의 내용을 정의합니다. 기본값은 $.msgbox.strings.yes
no : 질문 및 입력창의 아니오 버튼의 내용을 정의합니다. 기본값은 $.msgbox.strings.no
onresize : 윈도우 사이즈 변경시에 대응할 수 있는 이벤트를 정의합니다.
function(io){
// 'io' 는 내부 이벤트와 데이터가 담긴 인자입니다.
// 'this' 키워드는 경고창 부모를 가리킵니다. 이 때, 일반 DOM 형식입니다.
// this.modal : 모달 배경을 가리킵니다.
// this.msg : 메시지가 들어간 부분을 가리킵니다.
// this.inbox : 입력창에 입력란을 가리킵니다.
// this.buttons : 버튼이 들어있는 부분을 가리킵니다.
}
onopen : 경고창이 활성화 된 후 정의할 이벤트입니다.
onclose : 경고창이 닫히기 전 발생시킬 이벤트입니다.
정적 요소로, 이 속성을 지정하면 모든 MsgBox 의 버튼 등의 내용이 정의됩니다.
.ok : 경고창의 확인 버튼 내용
.yes : 질문창 및 입력창의 예 버튼 내용
.no : 질문 및 입력창의 아니오 버튼 내용
정적 요소로, 창 스타일이 결정됩니다. 직접 CSS로 입히고 싶다면 이 속성을 부여하거나 스타일 태그를 사용하면 됩니다.
ui : 경고창 기본 스타일
modal : 배경 모달 스타일
msg : 메시지 나오는 부분 스타일
buttons : 기본 버튼 스타일
indiv : 입력란 영역 스타일
input : 입력란 스타일
정적 요소로, window.onresize 이벤트와 동일한 이벤트지만 경고창에 특화된 이벤트입니다. $.msgbox() 함수의 onresize 속성과 사용법이 동일합니다.
반응형 웹 등을 사용하기 위해 기본 리사이즈 기능을 제거하려면 이 속성에 빈 함수를 부여하시면 됩니다. $.msgbox.onresize = $.noop;
우선 순위 : onresize for $.msgbox() > $.msgbox.onresize > default onresize callback
정적 요소로, $.msgbox() 함수의 onopen 이벤트와 같습니다. 경고창이 활성화 된 이후 이벤트가 실행됩니다.
function(options){
//'this' 키워드로 경고창 컨테이너 요소를 받을 수 있습니다.
//options 인자로 호출한 msgbox 의 옵션 속성을 가져올 수 있습니다.
//반환 값은 필요없습니다.
}note : onopen for $.msgbox() > $.msgbox.onopen > 정의되지 않으면 이벤트 실행 안 함.
정적 요소로, $.msgbox() 함수의 onclose 이벤트와 같습니다. 경고창이 닫기 전에 발생됩니다.
function(value){
//'this' 키워드로 경고창 컨테이너 요소를 받을 수 있습니다.
//value 는 사용자가 실행 결과 값을 가져오게 됩니다.
//입력 창에서는 OK를 누르면 사용자가 입력한 값을, 취소를 클릭할 경우 항상 null 을 가져옵니다.
//질문 창에서는 OK 누르면 true, Cancel 누르면 false 를 가져옵니다.
//CSS나 JS 애니메이션 효과에 대응할 수 있도록 지연된 객체(Deferred Object)를 반환할 수 있습니다.
//사용법은 간단합니다. 제이쿼리의 animation() 메서드나 slideUp() 같은 간단한 효과 메서드, $.ajax 도 가능합니다.
return $(this).slideUp('fast'); //이런 식입니다.
//지연된 객체가 아니거나 반환값이 없으면 msgbox 는 바로 닫히게 됩니다.
}note : onclose for $.msgbox() > $.msgbox.onclose > 정의되지 않으면 이벤트 실행 안 함.
조금 불편한 방법이긴 하지만 자바스크립트로 닫을 수 있습니다. 아례 에제를 참고하세요.
var msgbox = $.alert('sample alert.');
setTimeout(function(){
msgbox.find('.msgbox-ok').trigger('click');
}, 5000); // msgbox will automated close after 5 seconds.곧 편리한 방법으로 할 수 있도록 하겠습니다.
자신만의 경고/질문/입력창을 꾸밀 수 있습니다. 스크립트로 하는 방법과, 스타일시트를 이용하는 방법이 있습니다.
$.msgbox.css 정적 속성에 부여해 주시면 됩니다.
CSS 방식으로 적용하고자 한다면 아래처럼 msgbox-style 클래스를 붙여 주시면 됩니다.
<link class="msgbox-style" />
<!-- 또는 -->
<style class="msgbox-style" type="text/css"></style>이렇게 하면 기본 스타일이 없어집니다. 이제 어떻게 스타일이 구성되어 있는지 알아보겠습니다.
div.msgbox-modal : 회색으로 되어 있는 모달 배경 부분입니다.
div.msgbox-ui : 경고창의 부모 요소입니다.
div.msgbox-alert : 경고창 부모 요소 중 기본 경고창입니다.
div.msgbox-confirm : 경고창 부모 요소 중 기본 질문창입니다.
div.msgbox-prompt : 경고창 부모 요소 중 기본 입력창입니다.
div.msgbox-msg : "이름을 입력하세요" 같은 메시지가 출력되는 영역입니다.
div.msgbox-inbox : 입력란이 있는 영역이며, 입력 양식이 들어 있습니다.
input.msgbox-input : 입력 양식 자체를 가리킵니다.
div.msgbox-buttons : 버튼이 위치한 영역을 가리킵니다.
button.msgbox-button : 경고창에 나오는 모든 버튼을 가리킵니다.
button.msgbox-ok : OK 버튼을 가리킵니다.
button.msgbox-no : 질문이나 입력창의 Cancel 버튼을 가리킵니다.
이제 이를 활용하여 스타일시트를 적용하면 됩니다.
왠만한 브라우저 (IE의 경우 8 이상)이 지원됩니다. IE 7 이하는 테스트하지 않으며, 지원 계획이 없습니다.
jQuery 1.5 이상이 지원되며 1.8 이상에서도 지원되도록 개선하였습니다.
이 플러그인은 브라우저 내장 경고/질문/입력창을 대신할 수 없습니다. 반드시 브라우저 내장 기능과 동일한 방법으로 이용하지 마십시오.
IE 8 이하의 경우 동적 CSS 속성 부여 이슈로 다른 브라우저에 비해 늦은 반응으로 조금 깜박임이 있을 수 있습니다. 이는 가능한 원인을 찾으면 수정하고 반영하겠습니다.