카테고리 없음

jquery UI (제이쿼리 UI)dialog 사용법 완벽 정리 ! dialog 옵션

hyg4196 2021. 10. 22. 14:33
반응형

제이쿼리ui Download > https://jqueryui.com/download/

 

Download Builder | jQuery UI

Download Builder

jqueryui.com

 

 

1. JQuery UI 를 다운 받고 내가 지정한 파일안에 넣는다.

 

2. 지정한 경로에 JQuery , jquery-ui.css , jquery-ui.min.js 를 불러온다.

 

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-1.6.2.min.js"></script>
    <link rel="stylesheet" href="jquery-ui-1.13.0.custom/jquery-ui.css">
    <script src="jquery-ui-1.13.0.custom/jquery-ui.min.js"></script>
</head>
<body>

    <button class="dialogButton"> click</button>
    
    <div class="dialog"></div>
    <!-- <script src="NoDefine.js"></script> -->
    <script src="require.js"></script>
    <!-- <script src="TestDefine.js"></script> -->
    <script type="text/javascript">

        require(["TestDefine.js"]);
    </script>
</body>
</html>

 

3. dialog 함수를 사용

 

 

$('#dialog').dialog({
      title: '다이얼로그 제목을 넣자',
      modal: true,
      width: '300',
      height: '300'
});

 

기본적인 옵션

title : '제목'

modal : true   - 배경색을 어둡게 true , false

width : '300'    넓이

height : '300'   높이

resizeable : false  사이즈 조절 가능 여부

show : 'slide'   다이어리를 오픈 할때 사용하는 애니메이션 (slide, explode, blind 등 )

 

hide : 'explode'  창을 닫을때 사용한는 애니메이션

buttons : {}  버튼을 추가

 

 

 

const dialog = document.querySelector('.dialog');
        dialog.innerHTML = '<p class="ttt"> Hi ~ !</p>';
        $('.dialog').dialog({
            title: '다이얼로그 제목', // 다이얼로그 제목
            modal: true,        // 배경색 어둡게 true, false
            width: '300',       // 넓이
            height: '300',      // 높이
            resizeable : false,    // 사이즈 조절가능 여부
            show : 'slide',     // 나타날 때 사용하는 애니메이션 (slide, explode, blind)
            hide : 'explode',      // 사라질때 사용하는 애니메이션
            "position" : {
                my	: "center",
                at	: "center",
                //of	: window,
                //of	: "#INI_mainModalDialog",
            },buttons: {
                "확인":function() {
                    var test = document.querySelector('#TEST').value;
                    var divTest = document.querySelector(".TEST");
                    divTest.innerHTML = "이름 : "+test;
                    $(this).dialog("close"); //dialog 닫기 메소드 실행

                },  
                "취소":function() {
                  $(this).dialog("close"); //dialog 닫기 메소드 실행
              },
              
            },
            open: function() {
                dialog.innerHTML = '<p class="ttt"> 이름을 적으세요 </p><br><input type="text" id="TEST" value="TEST">';
                $(this).closest('.ini-ui-dialog').find('.ini-ui-dialog-buttonpane').hide();
                //$(this).dialog("widget").find(;
                //$(".ui-dialog-buttonpane").find('button:contains("Cancel")').addClass('cancelButtonClass');
            },
      });
반응형