옛날옛적

Javascript jQuery dialog 제어하기

Empering 2012. 7. 25. 12:19
반응형

jQuery ui 중에 dialog 가는 기능이 있다.

 

div에 적용시켜서 팝업처럼 사용 할수있게 만드는 기능이다

거기에다 나타날때와 사라질때 적절한 애니매이션 효과를 줄수도 있고,

그냥 적용만 시키면 드래그도 된다 -_-

 

전지전능한 jQuery

 

하지만 사용하다 보면 문제가 있는데...

사용 하지 않을 div도 나중에 사용을 위해서 미리 다 구현을 해놓고 사용을 해야할까?

라는 생각에서 스크립트를 조금 건들여서 필요할때마다 div를 삽입해서 사용할수있는 함수를 만들었다

(사실 프로젝트때 한페이지에서 dialog로 대부분의 처리를 ajax로 하는.... 방식을 해서 느린속도를 보안하기위해 꼭 필요했다...)

 

/*

 *  divID : 생성될 div의 아이디를 미리 지정 -> 나중에 이 아이디로 불러올 페이지까지 요청한다

*  opt    : dialog 처리할 옵션 (0 : 이미 열려있으면 닫고 다시 페이지 로드, 1 : 열려있다면 최상위로 올리기)

*    전달받은 divID값을 가지고 Ajax 처리해서 해당 dialog에 로드시킬 페이지를 가져온다..

*     ( 이기능은 java 에서 받아서 적절한 주소를 매핑시켜서 반환한다.

=        주소 값들은 DB나 자바쪽에서 divID 를 키 주소를 값 형태로 구성되어서 보관되어져 있다)

*/

 

 function openDialog(divID, opt) {
var id = "#" + divID;
var params="divID=" + divID;


$.ajax({
  type:"POST",
  url:"/div/makediv.oo",
  data:params,
  success:function(res) {

/*

*   $(id).dialog("isOpen") : 해당 id를 가진 dialog가 열려진 상태하면 var s 의 값은 true를 가진다

*   $(id).dialog("close") : 해당 dialog를 닫는다 (dialog 내부의 내용은 사라지지않고, 창이 보여지지만 않음)

*   $(id).dialog("open") : 해당 dialog를 연다

*   $(id).dialog("moveToTop") : 해당 dislog를 최상위로 (참고로 dialog의 기본 z-index는 1000 이다)

*   해당 div가 없는 상태라면 true 도 false 도 아닌 값을 가지기에 else 에서 처리가능

*   상태별로 opt 값을 가지고 적절한 행동을 취한다

*/

 

   var s = $(id).dialog("isOpen");
   if (s == true) {
    if (opt == 0) {
     //alert(divID + " 있음 닫고 다시");
           $(id).dialog("close");
           $(id).html(res);  // ajax의 결과가 html로 던져지게 만들어놨기때문에 dialog에 html로 넣는다
           $(id).dialog("open");
    } else if (opt == 1) {
     //alert(divID + " 있음 위로");
        $(id).dialog("moveToTop");
        return;
    }
   } else if (s == false) {
    //alert(divID + " 닫혀있음");
    $(id).dialog("open");
   } else {
    //alert(divID + " 없음 만들고 열기");
    $("body").append("<div id='" + divID + "'></div>");   // body 에 string 을 append 한다
    setDialogs(id);   // setDialogs 는 dialog의 상태를 정의하는 함수
    $("body").append(res);
    $(id).dialog("open");
   }
  },
  error:function(e) {  // ajax가 실패할때 메세지...
   alert("망함");
   alert(e.responseText);
  }
});
}

 

/*

*   위쪽에서 아이디를 넘겨서 해당 아이디일때 dialog의 속성을 정의한다

*    뭔가 이렇게 나열하는거 말고 다른 적절한 방법이 있을텐데...이렇게 마무리했다..;

*    $(id).dialog() : 해당 아이디를 가진 div를 dialog로 만든다

*            autoOpen : dialog를 만들면 자동으로 창이 열리는데 이걸 방지

*            modal : dialog 가 최상위로 올라오면서 다른영역은 클릭 불가능

*            resizable : 리싸이즈 가능 여부

*            show, hide : 나타나거나, 사라질때 애니매이션 적용

*            height, width, position : 말그대로...

*    더 상세한 옵션들은 jQuery 홈페이지로....

*/

 

function setDialogs(id) {
if (id == "#login_sub") {
  $(id).dialog({
      autoOpen : false, modal : false, resizable : false,
      height : 298, width : 405,
      position : [700, 200],
      show : 'slide', hide : 'slide'
  });
  return;
}
반응형