radio 버튼 동작과 유사한 radioClass 플러그인 만들어보기

radio 버튼 유사 기능을 플러그인화 하기

라디오 버튼을 클릭하면 그 형제 라디오버튼 해제되는데 이와 유사한 기능을 클래스로 토글시키는 간단한 플러그인을 제작해 봅니다.

예를 들어 li 태그를 클릭할 경우 해당 요소에 사용자 클래스명을 추가하고 형제 요소는 클래스를 제거하는 방식입니다.

radioClass 플러그인

마크업은 아래와 같이 구성되어있다고 가정합니다.

사용시에는 정의 마크업을 구성하면 됩니다.

html

<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>

플러그인은 아래와 같습니다.

javascript

/**
     * $.fn.radioClass 플러그인 정의
     * @param  {string} name    radioClass 를 적용할 class 속성 이름
     * @param  {string} context radioClass 를 적용할 컨텍스트 선택자
     * @return {jQuery Object}  $() 인스턴스 객체
     */
    (function(global, $){
        'use strict';

        var plugin = 'radioClass';
        $.fn[plugin] = $.fn[plugin] || function(className, context) {

                context = context || '';

                // 유효성 검사
                if ( $.type(name) !== 'string' ) {
                    throw new TypeError('전달된 name 인자는 문자열이어야 합니다.');
                }
                if ( $.type(context) !== 'string' ) {
                    throw new TypeError('전달된 context 인자는 문자열이어야 합니다.');
                }

                var _this = context ? this.closest(context) : this;
                _this.addClass(className);

                var $siblings = _this.siblings();
                $.each($siblings, function(index, item) {
                    var _$sibling = $siblings.eq(index);
                    if ( _$sibling.hasClass(className) ) {
                        _$sibling.removeClass(className);
                    }
                });
                // jQuery 체이닝을 위한 this 반환 설정
                return this;

            }; // 끝: $.fn.radioClass

    })(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');
        })
    });

See the Pen radioClass 플러그인 by jaeheekim (@jaehee) on CodePen.

Jaehee's e-room