본문 바로가기
프로그램

jQuery의 dblclick() 이벤트를 활용한 실용적인 예제들

by 다온다올과함께 2024. 11. 21.

 

 

 

다양한 jQuery dblclick() 이벤트의 실용적인 예제를 아래에 소개합니다. 각각의 예제는 실제 웹 개발에서 활용할 수 있는 내용으로 작성했습니다.

 

 

 

1. 이미지 확대/축소 기능

더블클릭 시 이미지를 확대하거나 원래 크기로 복원하는 예제입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Zoom</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        img {
            transition: transform 0.3s ease;
        }
    </style>
</head>
<body>
    <img src="https://via.placeholder.com/300" alt="Sample Image" id="image" width="300">

    <script>
        $(document).ready(function () {
            let isZoomed = false;

            $("#image").dblclick(function () {
                if (isZoomed) {
                    $(this).css("transform", "scale(1)");
                } else {
                    $(this).css("transform", "scale(1.5)");
                }
                isZoomed = !isZoomed;
            });
        });
    </script>
</body>
</html>

 

 

 

 

2. 리스트 항목 강조/해제

리스트 항목을 더블클릭하면 강조 표시를 추가하거나 제거하는 예제입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highlight List</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        $(document).ready(function () {
            $("li").dblclick(function () {
                $(this).toggleClass("highlight");
            });
        });
    </script>
</body>
</html>

 

 

 

 

3. 텍스트 더블클릭 시 편집 가능

더블클릭으로 텍스트를 편집할 수 있는 간단한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Editable Text</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p id="editable">Double-click to edit this text.</p>

    <script>
        $(document).ready(function () {
            $(document).on("dblclick", "#editable", function () {
                const currentText = $(this).text();
                const input = $("<input type='text'>").val(currentText);

                $(this).replaceWith(input);
                input.blur(function () {
                    const newText = $(this).val();
                    const paragraph = $("<p id='editable'>").text(newText);
                    $(this).replaceWith(paragraph);
                });
            });
        });
    </script>
</body>
</html>

 

jquery Method replaceWith() : 선택한 요소를 다른것으로 바꾸는 메소드

 

 

 

 

4. 카드 뒤집기 애니메이션

더블클릭 시 카드의 앞면과 뒷면이 바뀌는 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Card Flip</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .card {
            width: 200px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border: 1px solid #333;
            cursor: pointer;
            transition: transform 0.4s ease;
            transform-style: preserve-3d;
        }
        .back {
            display: none;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="front">Front</div>
        <div class="back">Back</div>
    </div>

    <script>
        $(document).ready(function () {
            $(".card").dblclick(function () {
                $(this).find(".front, .back").toggle();
            });
        });
    </script>
</body>
</html>

 

 

 

 

5. 더블클릭으로 새로운 요소 추가

더블클릭 시 목록에 새로운 항목을 추가하는 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add List Item</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>Existing Item 1</li>
        <li>Existing Item 2</li>
    </ul>
    <button id="add-item">Double-click to Add Item</button>

    <script>
        $(document).ready(function () {
            $("#add-item").dblclick(function () {
                $("#list").append("<li>New Item</li>");
            });
        });
    </script>
</body>
</html>

 

 

이 예제들은 실용성과 직관성을 고려하여 작성되었으며 필요에 따라 스타일과 기능을 커스터마이즈할 수 있습니다.

 

 

 

 

#jquery #dblclick #event #이미지확대 #이미지축소 #리스트항목강조해제 #텍스트더블클릭시편집가능 #카드뒤집기애니메이션 #새로운요소추가

 

 

 

 

 

반응형

댓글