본문 바로가기
javaScript

플러그인 기본 옵션 만들기 extend() 사용

by mooyou 2023. 11. 26.
728x90
300x250
SMALL

 

 

(function ($) {
  $.fn.addNumbers = function (num1, num2) {
    // 기본값 설정
    num1 = num1 || 1;
    num2 = num2 || 2;

    // 각 요소에 대해 덧셈 수행
    return this.each(function () {
      var result = num1 + num2;
      $(this).text("결과: " + result);
    });
  };
})(jQuery);

 

 

extend 사용 버전

(function ($) {
  $.fn.addNumbers = function (options) {
    // 기본 옵션 설정
    var settings = $.extend({
      num1: 1,
      num2: 2
    }, options);

    // 각 요소에 대해 덧셈 수행
    return this.each(function () {
      var result = settings.num1 + settings.num2;
      $(this).text("결과: " + result);
    });
  };
})(jQuery);

// 문서가 준비되면 실행
$(document).ready(function () {
  // 플러그인 사용 예제
  $('#result').addNumbers(); // 기본값 1과 2가 사용됨
  $('#result2').addNumbers({ num1: 5, num2: 10 }); // 사용자 정의 값
});
728x90
반응형
LIST

댓글