JQuery 플러그인 만들기 3 - 옵션 받기

How to accept options in jQuery plugin
jQuery 플러그인 만들기 3 - 옵션 받기

1 예시 1: 기본[ | ]

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
// 플러그인
(function ( $ ) {
    $.fn.highlight = function( options ) {
        var settings = $.extend({
            color: "red",
            backgroundColor: "yellow"
        }, options );
        
        return this.css({
            color: settings.color,
            backgroundColor: settings.backgroundColor
        });
    };
}( jQuery ));

// 사용 예시
$(function() {
    $('.box1').highlight();
    $('.box2').highlight({
        backgroundColor: 'white'
    });
    $('.box3').highlight({
        color: 'yellow',
        backgroundColor: 'green'
    });
});
</script>
 
<div class='box1'>한놈</div>
<div class='box2'>두시기</div>
<div class='box3'>석삼</div>

2 예시 2: 커스터마이징 제공[ | ]

예시1의 settings를 $.fn.highlight.defaults로 분리

외부에서 접근하여 확인·변경(커스터마이징) 가능

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
// 플러그인
(function ( $ ) {
    $.fn.highlight = function( options ) {
        var opts = $.extend( {}, $.fn.highlight.defaults, options );
        return this.css({
            color: opts.color,
            backgroundColor: opts.backgroundColor
        });
    };
    $.fn.highlight.defaults = {
        color: "red",
        backgroundColor: "yellow"
    };
}( jQuery ));

// 사용자 글로벌 커스터마이징
$.fn.highlight.defaults.color = "skyblue";
    
// 사용 예시
$(function() {
    $('.box1').highlight();
    $('.box2').highlight({
        backgroundColor: 'white'
    });
    $('.box3').highlight({
        color: 'yellow',
        backgroundColor: 'green'
    });
});
</script>
 
<div class='box1'>한놈</div>
<div class='box2'>두시기</div>
<div class='box3'>석삼</div>

3 같이 보기[ | ]

4 참고[ | ]

https://learn.jquery.com/plugins/basic-plugin-creation/