[STEP 03] 기초 플러그인 제작 가이드

jQuery PlugIn 기초

이번 단계에서는 사용자가 정의한 클래스 속성을 원하는 요소에 설정하도록 제작해보도록 하겠습니다.

마크업은 이전과 동일한 형태입니다.

STEP 03

JavaScript

/ 전역이 오염되지 않도록 별도의 공간을 생성
// 스코프 함수 (즉시 실행되는 함수 내부)

(function(global, $){
    'use strict';

    // $.fn.radioClass 플러그인이 존재하지 않는다면?
    if ( !$.fn.radioClass ) {


        $.fn.radioClass = function(name, context) {

            // 클래스 속성이 설정될 context 의 기본 값을 설정합니다.
            // 사용자 정의 값이 있으면 덮어쓰기
            context = context ? context : null;

            // context 가 설정되어 있으면 this 인스턴스 객체로부터
            // 가장 가까운 DOM 객체를 찾아 jQuery 인스턴스 객체를 반환
            var _this = context ? this.closest(context) : this;

            _this.addClass(name);

            // _this 인스턴스 객체의 형제 인스턴스 집합을 찾습니다.
            var $siblings = _this.siblings();

            $.each($siblings, function(index, el) {
                var _$sibling = $siblings.eq(index);
                if ( _$sibling.hasClass(name) ) {
                    _$sibling.removeClass(name);
                }
            });

            // jQuery 체이닝을 위한 this 반환 설정
            return this;

        }; // 끝: $.fn.radioClass

    } // 끝: if

})(window, window.jQuery);

$(function () {
    // 접근성을 위해 a 를 클릭하도록 합니다.(탭 포커스 이동시를 고려)
    var $ul = $('ul');
    $ul.on('click','li a', function (e) {
        e.preventDefault();
        // a 에 selected 가 되지 않도록 radioClass context 를 li 로 넘겨줍니다.
        $(this).radioClass('selected', 'li');
    })
});

다음 단계[STEP 04] 에서는 플러그인 사용자가 사용함에 있어서 실수를 줄여주기 위한 간단한 유효성 검사항목을 추가하여 제작해 보도록 하겠습니다.

Jaehee's e-room