Javascript jQuery dialog 제어하기

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;
}