세로형 2단 메뉴 - jQuery Study #2

심플 세로형 2단 메뉴 - 단계별 학습 #2

이 글에서는 지난 시간에 이어 기존 코드를 플러그인화 시켜보도록 하겠습니다.

JavaScript

기존 단계별 학습 #1에서 진행했던 마크업과 CSS는 동일하며 자바스크립트는 플러그인화 시킨 부분만 보여주도록 하겠습니다.

javascript

(function($) {
    // 플러그인 정의
    $.fn.accordionMenu = function () {
        this.each(function (index) {
            var $this = $(this);
            var accMenu = new AccordionMenu($this);

            // n번째 인덱스에 해당하는 메뉴를 선택하는 기능(selectMenu())을
            // 사용하기 위해 accordionMenu 플러그인에서 생성한 AccordionMenu 객체를 저장
            $this.data('accordionMenu', accMenu);

        });
        return this;
    };
    
    // n번째 메뉴를 선택하는 플러그인 정의
    $.fn.selectIndexItem = function (mainIndex, subIndex) {
        this.each(function (index) {
            var $this = $(this);
            var indexMenu = $this.data('accordionMenu');
            indexMenu.selectMenu(mainIndex, subIndex);
        });
        return this;
    };
    
}(jQuery));

$(function () {
    // 아코디언 메뉴 플러그인 실행
    $('#accordionMenu1').accordionMenu();


    // 사용자 정의 이벤트 등록하기
    $('#accordionMenu1').on('open', function (e) {
        console.log('open', e.$target.find('.main-title a').text());
    });

    $('#accordionMenu1').on('close', function (e) {
        console.log('close', e.$target.find('.main-title a').text());
    });

    $('#accordionMenu1').on('selected', function (e) {
        var oldText = '없음';

        if(e.$oldItem) {
            oldText = e.$oldItem.text();
        }
        console.log('select old = ', oldText + ', new = ' + e.$newItem.text()  );
    });

    // selectIndexItem 플러그인으로 0번째 서브 메뉴패널을 열고 1번째 서브 메뉴아이템을 선택
    $('#accordionMenu1').selectIndexItem(0, 1);

});

위의 코드는 기존 코드를 가지고 플러그인을 정의 및 실행하는 코드를 담고 있습니다.

Result View

See the Pen 2단 메뉴 #2 by jaeheekim (@jaehee) on CodePen.

Related Info

1. 세로형 2단 메뉴(프로토타입) - 단계별 학습 #1

Jaehee's e-room