다양한 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 #이미지확대 #이미지축소 #리스트항목강조해제 #텍스트더블클릭시편집가능 #카드뒤집기애니메이션 #새로운요소추가
반응형
'프로그램' 카테고리의 다른 글
jQuery의 keydown() / keyup() / keypress() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.23 |
---|---|
jQuery의 focus() / blur() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.22 |
jQuery의 mouseenter() / mouseleave() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
jQuery의 hover() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
jQuery의 click() 이벤트를 실용적으로 활용하는 기본적인 예제 (0) | 2024.11.18 |
댓글