jquery mobile [alert, 알림창, 커스텀 다이얼로그 만들기]

 

jquery mobile 에서 alert 만들기 (jquery plugin 사용)

pc 웹에서도 사용가능합니다.

 

 

jquery mobile 을 사용해서 하이브리드 앱을 만들다 보니 alert 창이 너무 거슬린다.

 

이유는 alert 창에 웹주소가 표시되기 때문이다.

 

그래서 jquery mobile dialog (다이얼로그 팝업)를 이용해보니 알림이라기 보다는 팝업의 느낌이 강했다.

 

화면도 사라지고 별도에 다이얼로그 창 하나가 떠서 페이지를 이동한 느낌이 강했다.

 

http://cofs.tistory.com/154 <- jquery mobile 다이얼로그 팝업 강좌

 

 

다른 방법으로 jquery 의 dialog 를 이용해 보았다.

 

그랬더니 화면이 깨지더라....  css 가 충돌인지 무슨이유인지 깊게 알고싶지 않았다.

 

 

그래서 jquery plugin 을 찾아보았다.

 

생각보다 나와 같은 고민을 하는 사람이 있었다. 그러던 중 알맞은 plugin을 찾았다.

 

 

 

 

위 이미지를 포함한 여러가지 색생과 테마를 제공한다.

 

자동 리사이징 되어서 mobile 환경에서도 문제없이 사용가능하고 web 환경에서도 사용가능하다.

 

 

단순한 알림창으로만 사용하려면 문제가 없지만 기존의 alert 처럼 사용하기에는 문제가 있다.

 

예를 들어서 다음과 같은 소스가 있다고 하자.

<script>
   alert("안녕");
   location.href = "http://www.naver.com";
<script>

 

보통의 웹에서는 안녕이라는 alert 창이 뜨고 확인을 누르면 href 가 실행되어 해당하는 페이지로 이동하게 된다.

 

web의 alert은 잠시동안 프로세스를 정지시키는 효과가 있다. 그래서 확인 버튼을 누르면 자동으로 다음 작업을 실행하게 되는 것이다.

 

하지만 사용하려는 plugin 은 별도의 modal 화면(화면 위에 떠있는 태그일 뿐)이기 때문에 계속 작업이 진행된다.

 

안녕이라는 alert 창이 보이고 바로 페이지 이동을 실행해 버린다. 너무 빨라 안보일 수 도 있다.

 

그래서 번거롭더라도 다음 작업(위 소스 기준으로 href)을 확인 버튼을 누른 후 callback 함수를 이용하도록 유도해야 한다.

 

불편할 수 도 있지만 사용해보니 jquery mobile dialog 보다 시각적으로 훨씬 낫다.

 

그래서 커스터마이징이 필요하다.

 

하지만 기본적으로 필요한 부분은 이미 다 해놨다. 가져다 쓰기만 하면 된다.

 

 

 

 

먼저 plugin을 아래 주소에서 다운받는다.

 

https://github.com/CreativeDream/jquery.modal

 

 

 

플러그인 정보이다.

 

jQuery Modal
Copyright (c) 2015 CreativeDream
Website http://creativedream.net/plugins
Version: 1.2.3 (10-04-2015)
Requires: jQuery v1.7.1 or later

 

MIT License 이니 자유롭게 사용해도 되겠다.

 

 

plugin를 import 하는 방법(js, css import)은 생략한다.

 

 

다음은 실제로 사용하는 방법이다.

 

나는 편하게 사용하기 위해서 공통 js 파일에 정의해놓고 사용한다.

 

function alertBox(txt, callbackMethod, jsonData){
    modal({
        type: 'alert',
        title: '알림',
        text: txt,
        callback: function(result){
            if(callbackMethod){
                callbackMethod(jsonData);
            }
        }
    });
}
 
function alertBoxFocus(txt, obj){
    modal({
        type: 'alert',
        title: '알림',
        text: txt,
        callback: function(result){
            obj.focus();
        }
    });
}
 
    
function confirmBox(txt, callbackMethod, jsonData){
    modal({
        type: 'confirm',
        title: '알림',
        text: txt,
        callback: function(result) {
            if(result){
                callbackMethod(jsonData);
            }
        }
    });
}
 
function promptBox(txt, callbackMethod, jsonData){
    modal({
        type: 'prompt',
        title: 'Prompt',
        text: txt,
        callback: function(result) {
            if(result){
                callbackMethod(jsonData);
            }
        }
    });
}
 
function successBox(txt){
    modal({
        type: 'success',
        title: 'Success',
        text: txt
    });
}
 
function warningBox(txt){
    modal({
        type: 'warning',
        title: 'Warning',
        text: txt,
        center: false
    });
}
 
function infoBox(txt){
    modal({
        type: 'info',
        title: 'Info',
        text: txt,
        autoclose: true
    });
}
 
function errorBox(txt){
    modal({
        type: 'error',
        title: 'Error',
        text: txt
    });
}
 
function invertedBox(txt){
    modal({
        type: 'inverted',
        title: 'Inverted',
        text: txt
    });
}
 
function primaryBox(txt){
    modal({
        type: 'primary',
        title: 'Primary',
        text: txt
    });
}

 

크게 어려운게 없어보이니 소스설명은 생략한다.

 

기본적인 사용방법은 다음과 같다.

<script>
   alertBox("안녕", goNaver);
 
   function goNaver(){
      location.href = "http://www.naver.com";
   }
<script>

 

<script>
   alertBox("안녕", goNaver, {url:"http://www.naver.com"});
 
   function goNaver(urlData){
      location.href = urlData.url;
   }
<script>

 

 

위에서 설명했듯이 callback 함수를 이용해야 함으로 손이 많이 가는것은 사실이다.

 

하지만 callback 함수를 지원하는 것에 대해 너무 고마운건 사실이다.