본문 바로가기
클라이언트/JavaScript
jQuery UI
Hana_h 2023. 5. 2. 12:39

// jQuery UI

    - jQuery에 애니메이션 기능을 확장한 것

- draggable(): 마우스로 클릭해서 드래그할 수 있다.

        draggable({
            axis: 'x' > 좌우로만 이동 가능
            axis: 'y' > 상하로만 이동 가능
            grid:[x,y] > 한번에 이동 가능한 범위 제한
            containment > 지정 태그의 영역을 벗어날 수 없음
            snap > 지정 태그에 가까이 가면 자석에 끌리듯 붙음
            cursor > 커서 모양을 바꿀 수 있음
        });

<!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>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <style>
    
    </style>
</head>
<body>

    <h1>Interactions <small>Draggable</small></h1>

    <img src="images/catty01.png" id="cat1">
    <img src="images/catty01.png" class="cat">
    <img src="images/catty02.png" class="cat">
    <img src="images/catty03.png" class="cat">
    <img src="images/catty04.png" class="cat">
    <img src="images/catty05.png" class="cat">
    <img src="images/catty06.png" class="cat">
    <img src="images/catty07.png" class="cat">
    <img src="images/catty08.png" class="cat">
    <img src="images/catty09.png" class="cat">

    <hr>

    <div style="border: 1px solid black; width: 400px; height: 300px;" id="box">
        <img src="images/catty09.png" id="cat2">
    </div>

    <script src="js/jquery-3.6.4.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script>

        $('#cat1').draggable();
        $('.cat').draggable({
            snap: '#box'
        });

        $('#cat2').draggable({
            containment: 'parent'
        });
    
    </script>

</body>
</html>

- droppable(): 무엇인가가 드래그 후 놓였을 때 발생하는 이벤트를 설정할 수 있다.

        droppable({
            tolerance: 'fit' > 무엇인가가 완전히 들어올 때 이벤트 함수 발생
            tolerance: 'touch' > 무엇인가가 살짝만 닿아도 이벤트 함수 발생
            drop: function() {} > 이벤트 함수
        });

<!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>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <style>
        #box {
            width: 250px;
            height: 250px;
            background-color: gold;
        }
    </style>
</head>
<body>

    <h1>Interactions <small>Droppable</small></h1>

    <div id="box"></div>

    <img src="images/catty01.png" id="cat">

    <script src="js/jquery-3.6.4.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script>

        $('#cat').draggable({
            cursor: 'move'
        });

        $('#box').droppable({
            tolerance: 'fit',
            drop: function() {
                $(this).css('background-color', 'tomato');
                $('#cat').draggable({
                    containment: '#box'
                });
            }
        });

        $('#cat').dblclick(function() {

            $('#box').css('background-color', 'gold');

            $(this).draggable({
                containment: ''
            })
        });

    </script>

</body>
</html>

- resizable(): 사이즈를 조절할 수 있다.

        resizable({
            maxWidth> 최대 너비
            maxHeight > 최대 높이
            minWidth > 최소 너비
            minHeight > 최소 높이
            grid: [w, h] > 한번에 조절 가능한 크기

            animate: true
            helper: 'helper' > helper로 가이드를 표시하고, 마우스를 놓을 때 사이즈 조절

            alsoResize: '다른오브젝트' > 다른 오브젝트의 사이즈도 조절
            aspectRatio: true > 비율 유지
        
        });

<!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>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <style>
        #box, #box2 {
            width: 200px;
            height: 200px;
            background-color: gold;
            margin-bottom: 20px;
        }

        .helper {
            border: 1px dotted #333;
        }
    </style>
</head>
<body>

    <h1>Interactions <small>Resizable</small></h1> 

    <div id="box"></div>
    <div id="box2"></div>

    <img src="images/catty01.png" id="cat">

    <script src="js/jquery-3.6.4.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script>

        $('#cat').resizable({
            aspectRatio: true
        });

        $('#box').resizable({
            maxWidth: 500,
            maxHeight: 500,
            minWidth: 100,
            minHeight: 100,
            animate: true,
            helper: 'helper'
        });

        $('.cat').resizable({
            alsoResize: '.cat'
        });

        $('#box2').resizable({
            alsoResize: '#box'
        })
    
    </script>

</body>
</html>

- selectable(): 리스트 사용 시 요소를 선택하면 해당 요소에 ui-selected 클래스를 추가해준다. (class는 직접 구현해야 함)

 

<!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>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <style>

        #list2 li.ui-selected {
            background-color: antiquewhite;
            color: rgb(131, 75, 1);
        }

        #list2 {
            border: 1px solid #555;
            width: 150px;
            border-radius: 5px;
        }

        #list2 > h1 {
            font-size: 18px;
            margin: 0;
            text-align: center;
            background-color: #555;
            color: white;
            padding: 7px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

        #list2 > ul{
            margin: 0;
            padding: 0;
        }

        #list2 > ul >li {
            text-align: center;
            padding: 5px;
            border-bottom: 1px solid #CCC;
            cursor: pointer;
        }

        #list2 > ul > li:last-child {
            border-bottom: 0;
        }

        #list3 img {
            opacity: .2;
            cursor: pointer;
        }

        #list3 img.ui-selected {
            opacity: 1;
        }

    </style>
</head>
<>

    <h1>Interactions <small>Selectable</small></h1> 
    
    <div id="list2">
        <h1>언어 선택</h1>
        <ul>
            <li>Java</li>
            <li>Oracle</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>

    <hr>

    <h1>프로젝트 팀원 선택(1명 이상)</h1>
    <div id="list3">
        <img src="images/man_01.png">
        <img src="images/man_02.png">
        <img src="images/man_03.png">
        <img src="images/woman_01.png">
        <img src="images/woman_02.png">
        <img src="images/woman_03.png">
    </div>


    <script src="js/jquery-3.6.4.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script>

        $('#list2 > ul').selectable();

        $('#list3').selectable();
    
    </script>

</body>
</html>

- sortable(): 사용자가 직접 순서를 변경할 수 있다.

<!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>
    <link rel="stylesheet" href="css/jquery-ui.css">
    <style>
    
    </style>
</head>
<body oncontextmenu="return false;">

    <h1>Interactions <small>Sortable</small></h1> 

    <h1>목록</h1>

    <ul id="list1">
        <li>Java</li>
        <li>Oracle</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul> 

    <hr>

    <h1>프로젝트 팀원 선택(1명 이상)</h1>
    <div id="list3">
        <img src="images/man_01.png">
        <img src="images/man_02.png">
        <img src="images/man_03.png">
        <img src="images/woman_01.png">
        <img src="images/woman_02.png">
        <img src="images/woman_03.png">
    </div>

    <script src="js/jquery-3.6.4.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script>
    
        $('#list1, #list3').sortable();
    </script>

</body>
</html>

 

'클라이언트 > JavaScript' 카테고리의 다른 글

[자바스크립트(JavaScript)] Template Literals(템플릿 리터럴)  (0) 2023.11.13
JSON  (0) 2023.05.04
jQuery  (0) 2023.05.01
CSS 조작  (0) 2023.04.27
[자바스크립트(JavaScript)] 클로저  (0) 2023.04.27

'클라이언트/JavaScript' Related Articles

티스토리툴바