JQuery 플러그인 만들기 4 - 플러그인 이름 변수로 지정하기

1 개요[ | ]

jQuery 플러그인 만들기 4 - 플러그인 이름 변수로 지정하기

플러그인 이름을 변경할 때 매우 간편함

2 예시[ | ]

JavaScript

Copy

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
// 플러그인
;(function ( $ ) {
    var pluginName = "highlight";
    var defaults = {
        color: "red",
        backgroundColor: "yellow"
    };
    function Plugin ( element, options ) {
        this.element = element;
        this.$element = $(element);
        this.settings = $.extend({}, defaults, options );
        this.init();
    }
    $.extend(Plugin.prototype, {
        init: function () {
            this.$element
                .css("color", this.settings.color)
                .css("background-color", this.settings.backgroundColor);
	    },
    });
    $[ pluginName ] = $.fn[ pluginName ] = function ( options ) {
        return this.each(function() {
            if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
            }
        });
    };
    $.fn[ pluginName ].defaults = defaults;
})( jQuery, window, document );
 
// 사용자 커스터마이징
$.highlight.defaults.color = "skyblue";

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

3 같이 보기[ | ]