<Jquery UI>Dialog 사용하기

jQuery UI 는 jQuery 와 CSS 와 HTML 이 짬뽕된 묶음이라고 생각하면 되겠다. jqery 의 문법형식을 쓰며 HTML로 구조도 바꿀수 있고 부트스트랩처럼 클래스이름을 붙여줌으로써 자동으로 스타일링이 들어간다. 

 

jQuery UI를 사용했을 때 (Dialog) 와 사용하지 않았을 때를 비교해서 한번  정리 해보겠다.

 

먼저 UI 라이브러리를 사용하지 않았을 때 Dialog 의 기능을 대신하려면 직접 템플릿을 만들어서 붙여주어야 한다. 

 

 

	$(".crud-c").click(function(){
    		$("body").append(""+
    				'<div class="shield"></div>'+
    				'<div class="insert-box">'+
    		            '<div class="ins-title-box"><span style="font-size:20px;font-weight:bold">제목 :</span>'+
    		                '<input type="text" class="insert-title" />'+
    		            '</div>'+
    		            '<div class="writer-box"><span style="font-size:20px;font-weight:bold">아이디 :</span>'+
    		                '<input type="text" class="insert-writer" />'+
    		            '</div>'+
    		            '<div class="cate-box"><span style="font-size:20px;font-weight:bold">카테고리 :</span>'+
    		            '<select name="dept" id="dept-type">'+
        		        '<option value="자유">자유</option>'+
        	            '<option value="공지">공지</option>'+
        		        '</select>'+
    		            '</div>'+
    		        '<div class="ins-content-container">'+
    		            '<textarea cols="50" rows="20" type="text" id="insert-content">'+
    		            '</textarea>'+
    		        '</div>'+
    		        '<input type="button" id="reg" value="등록" />'+
    		        '<input type="button" id="close" value="취소" />'+
    		    '</div>'	
    		);

 

 

 

 

이런식으로 직접 이벤트가 발생했을 때 HTML 구조를 다 짜서 사용자에게 보여주게 하는 고전적인 방법이다. 

 

 

 

 

<div id="writeBoard" title="정말 등록하시겠습니까?">
        <span>제목 : </span> <input type="text" id="check">
        <span>내용 : </span> <input type="text" id="check">
 </div> // html 혹은 스크립트에서 writeBoard 구현
 
 	$("#writeBoard").dialog({
            	autoOpen:false, //자동으로 열리지않게
                position:{
                	my:"center", 
                    at:"center", 
                    of:"section" 
                }, //가운데
                modal:true, //모달대화상자
                resizable:true, //크기 조절 못하게
                    
                buttons:{
                    "확인":function(){
                    	sendRegData();
                        $(this).dialog("close");
                        $(".shield").remove();
                        $(".insert-box").remove();
                        location.reload(true);
                        
                    },"취소":function(){
                        $(this).dialog("close");
                        $(".insert-box").remove();
                        $(".shield").remove();
                    }
                }
            });    // wirteBoard 를 dialog 로 인식하게 해준뒤 몇가지 설정
            
         
       $("선택자").이벤트(function(){
        $("#writeBoard").dialog("open");  // 이벤트 발생시 창 오픈
       });

 

개인적으로 두 가지 방법 전부 좋다고 생각한다. 

 

첫번째는 내게 익숙한 방법으로 스타일링과 기능구현을 할 수있고 두번째는 정해져있는 스타일링을 이용해야되고 저렇게 지정한 dialog 에 대해 설정도 해줘야 하기 때문에 어느 하나가 더 좋다고 말 할 순 없을 것 같다. 직접 써보면 각각의 불편한 점들을 느낄 것이다잉