min's devlog

jQuery 예제 본문

til/Front

jQuery 예제

값진 2022. 6. 19. 23:49

(1) 프로젝트 팀원 선택

<body>
    <h1>프로젝트 팀원 선택</h1>

    <div id="list3">
        <img src="images/man_01.png" data-no="0">
        <img src="images/man_02.png" data-no="1">
        <img src="images/man_03.png" data-no="2">
        <img src="images/woman_01.png" data-no="3">
        <img src="images/woman_02.png" data-no="4">
        <img src="images/woman_03.png" data-no="5">
    </div>

    <input type="button" value="순서 확인하기" id="btn">
    <div id="result"></div>

    <script>
        $('#list1, #list3').sortable();
        $('#btn').click(function() {

            // document.querySelectorAll('#list3 img').forEach((img, index) => {
            //     document.getElementById('result').innerHTML += img.dataset['no'] + '<br>';
            // });
            $('#list3').children().each(function(index, item) {
                $('#result').append($(item).data('no') + '<br>');
            });
        });     
    </script>
</body>

실행 결과

캐릭터(삽입한 이미지)들에게 번호가 부여되어 있고, 0번~5번까지 정렬이 되어있다. 하지만 캐릭터의 순서를 바꾸고 순서 확인하기 버튼을 누르면 달라진 번호가 출력된다.

 

 

(2) 박스의 크기 바꾸기

    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: lemonchiffon;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: navajowhite;
            margin-top: 20px;
        }
        .helper {
            border: 1px dotted #333;
        }
    </style>
</head>
<body>
    <h1>Interactions <small>Resizable</small></h1>

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

    <script>
        $('#box').resizable({
            //helper: 'helper',
            //animate: true
            //grid: [100, 200]
            maxWidth: 500,
            maxHeight: 500,
            minWidth: 100,
            minHeight: 100,
            alsoResize: '.box2'
        });

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

실행 결과
박스 크기 조절

첫번째 박스의 오른쪽 하단 모서리로 크기를 조절하면, 첫번째 박스와 두번째 박스 모두 크기를 조절할 수 있다.

'til > Front' 카테고리의 다른 글

카카오 지도 API 연동  (0) 2022.06.17
jQuery  (0) 2022.06.17
[JavaScript] 함수(function)  (0) 2022.06.17
[JavaScript] 객체(Object)  (0) 2022.06.13
[JavaScript] 호이스팅(Hoisting)  (0) 2022.06.13
'til/Front' Related Articles more
Comments