728x90
300x250
SMALL
아래 매개변수를 입력받아 덧셈을 수행하는 간단한 플러그인이 있다.
아래의 경우 매개변수값을 입력해주지 않으면 NaN에러가 나타나게 된다.
(function ($) {
$.fn.addNumbers = function (num1, num2) {
// 각 요소에 대해 덧셈 수행
return this.each(function () {
var result = num1 + num2;
$(this).text(result);
});
};
})(jQuery);
$(document).ready(function () {
// 플러그인 사용 예제
$('#result').addNumbers(5, 10);
});
옵션 값을 입력하지 않을 경우 기본값이 나오도록 설정해 보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Plugin Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// jQuery 플러그인 정의
(function ($) {
$.fn.addNumbers = function (num1, num2) {
// 기본값 설정
num1 = num1 || 1;
num2 = num2 || 2;
// 각 요소에 대해 덧셈 수행
return this.each(function () {
var result = num1 + num2;
$(this).text("결과: " + result);
});
};
})(jQuery);
// 문서가 준비되면 실행
$(document).ready(function () {
// 플러그인 사용 예제
$('#result').addNumbers();
$('#result2').addNumbers(5, 10);
});
</script>
</head>
<body>
<div id="result"></div>
<div id="result2"></div>
</body>
</html>
728x90
반응형
LIST
'javaScript' 카테고리의 다른 글
| 플러그인 기본 옵션 값 적용하기 _extend() 사용 - 비공개 (0) | 2023.11.26 |
|---|---|
| extend() 메서드 (0) | 2023.11.25 |
| 플러그인 기본 옵션값 적용하기 - 비공개 (0) | 2023.11.23 |
| 플러그인 그룹 - 비공개 (0) | 2023.11.22 |
| 클래스 기반 플러그인 방식 탭메뉴 만들기 - 비공개 (0) | 2023.11.19 |
댓글