JQuery 편집하기 (부분)

== 플러그인 ==

jQuery의 '''플러그인 시스템'''은 기능을 확장하고 재사용 가능한 컴포넌트를 만들 수 있게 해준다.

=== 유명한 jQuery 플러그인들 ===

<syntaxhighlight lang="javascript">
// jQuery UI - 공식 UI 라이브러리
$('#datepicker').datepicker();
$('#dialog').dialog();
$('#sortable').sortable();
$('#draggable').draggable();

// Owl Carousel - 이미지 슬라이더
$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
        0: { items: 1 },
        600: { items: 3 },
        1000: { items: 5 }
    }
});

// Select2 - 강화된 셀렉트 박스
$('#mySelect').select2({
    placeholder: "옵션을 선택하세요",
    allowClear: true
});

// DataTables - 테이블 기능 강화
$('#myTable').DataTable({
    paging: true,
    searching: true,
    ordering: true,
    language: {
        url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/Korean.json'
    }
});

// Validation - 폼 검증
$('#myForm').validate({
    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 8
        }
    },
    messages: {
        email: "유효한 이메일을 입력하세요",
        password: "비밀번호는 8자 이상이어야 합니다"
    }
});
</syntaxhighlight>

=== 플러그인 작성법 ===

<syntaxhighlight lang="javascript">
// 기본 플러그인 구조
(function($) {
    $.fn.myPlugin = function(options) {
        // 기본 설정
        var settings = $.extend({
            color: 'red',
            fontSize: '14px'
        }, options);
        
        // 체이닝을 위해 this 반환
        return this.each(function() {
            var $this = $(this);
            
            // 플러그인 로직
            $this.css({
                'color': settings.color,
                'font-size': settings.fontSize
            });
        });
    };
})(jQuery);

// 사용법
$('.my-class').myPlugin({
    color: 'blue',
    fontSize: '16px'
});
</syntaxhighlight>

=== 고급 플러그인 패턴 ===

<syntaxhighlight lang="javascript">
// 객체 지향 플러그인 패턴
(function($) {
    function MyWidget(element, options) {
        this.element = $(element);
        this.options = $.extend({}, MyWidget.DEFAULTS, options);
        this.init();
    }
    
    MyWidget.DEFAULTS = {
        color: 'black',
        speed: 300
    };
    
    MyWidget.prototype = {
        init: function() {
            this.bindEvents();
            this.render();
        },
        
        bindEvents: function() {
            var self = this;
            this.element.on('click.mywidget', function() {
                self.toggle();
            });
        },
        
        render: function() {
            this.element.css('color', this.options.color);
        },
        
        toggle: function() {
            this.element.fadeToggle(this.options.speed);
        },
        
        destroy: function() {
            this.element.off('.mywidget');
            this.element.removeData('mywidget');
        }
    };
    
    // jQuery 플러그인으로 등록
    $.fn.myWidget = function(option) {
        return this.each(function() {
            var $this = $(this);
            var data = $this.data('mywidget');
            var options = typeof option == 'object' && option;
            
            if (!data) {
                $this.data('mywidget', (data = new MyWidget(this, options)));
            }
            if (typeof option == 'string') {
                data[option]();
            }
        });
    };
    
})(jQuery);

// 사용법
$('#myElement').myWidget({color: 'red'});
$('#myElement').myWidget('toggle');
$('#myElement').myWidget('destroy');
</syntaxhighlight>