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

jQuery PlugIn 기초

STEP 01 단계에서는  a 태그가 없는 li 에 class 를 추가하는 플러그인이었습니다.

하지만 li 요소는 탭포커스가 이동되지 않기 때문에 접근성을 위한 탭포커스를 위해 마크업에 a 태그를 추가하여 접근성까지 고려한 플러그인을 제작해보도록 하겠습니다.

Mark-up

<ul>
    <li><a href="#none">Lorem ipsum dolor sit amet.</a></li>
    <li><a href="#none">Lorem ipsum dolor sit amet. Lorem ipsum dolor.</a></li>
    <li><a href="#none">Lorem ipsum dolor sit amet.</a></li>
    <li><a href="#none">Lorem ipsum dolor sit amet. Lorem ipsum dolor.</a></li>
</ul>

STEP 02

JavaScript

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

    'use strict';

    // $.fn.radioClass 플러그인이 존재 유무를 체크합니다.
    // 두가지 방법으로 체크할 수 있습니다. 코드량을 줄이기 위해 !$.fn.radioClass 를 사용합니다.
    // if(typeof $.fn.radioClass !== 'function')
    if (!$.fn.radioClass) {

        // $.fn 객체의 radioClass 메소드 정의
        $.fn.radioClass = function(name) {

            // 플러그인이 연결된 jQuery 인스턴스 객체에 name 클래스 속성을 추가합니다.
            this.parent().addClass(name);

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

            // 집합 내부를 순환하여 name 클래스 속성 이름 값을 가진 요소에서 name 클래스 속성을 제거합니다.
            $.each($siblings, function(index, el) {

                var _$siblings =  $siblings.eq(index);

                if ( _$siblings.hasClass(name) ) {
                    _$siblings.removeClass(name);
                }

            });

            // jQuery 체이닝(Chaning)을 고려한다면, this 를 반환합니다.
            // this 는 jQuery 인스턴스 객체입니다.
            // 체이닝을 하지 않겠다면 굳이 this 를 반환하지 않아도 됩니다.
            return this;

        }

    }

})(window, window.jQuery);

$(function () {
    // 접근성을 위해 context 를 a 로 설정합니다.
    var $ul = $('ul');
    $ul.on('click','li > a', function (e) {
        e.preventDefault();
        $(this).radioClass('selected');
    })
});

다음 단계 [STEP 03] 에서는 사용자가 정의한 클래스 속성을 원하는 요소에 설정할 수 있도록 확장해 보겠습니다.

Jaehee's e-room