제이쿼리 사용자 정의 이벤트 질문입니다. 채택완료

...

// jQuery chainning 을 위해 반환

return this.each(function() {

// $(this) 는 $(메뉴) 에 해당함

$(this).each(function (idx, ele) {

...

// 이것은 그냥.. 이렇게 되야겠네요. this == $('.tabMenu') 입니다.

return this.each(function(idx, ele) {

   ...

};

tabMenu1 = {

    $tabMenu : $tabMenu,

    setSelectItemAt : setSelectItemAt

};

    제목

    내용





    목록1

    목록2

    목록3

(function($) {

    // `printOut` 이라는 jQuery 플러그인 등록

    $.fn.printOut = function() {

        // HTML element 의 내용을 콘솔에 출력

        console.log(this.html());

    };

})(jQuery);

$(document).ready(function () {

    // `#article` 의 내용을 출력합니다.

    $('#article').printOut();

    #('.lst').printOut(); // 첫번째 .lst 의 내용만 출력됨 T_T;;;

});

(function($) {

    // `printOut` 이라는 jQuery 플러그인 등록

    $.fn.printOut = function() {

        // 아래의 this는 $('.lst') 와 같습니다.

        // '.lst' 클래스를 갖는 element 들에 대해서 반복문을 돈다고 이해하시면 되겠습니다.

        this.each(function(idx, ele) {

            // 각 .lst ELEMENT 들에 대해서 내용을 화면에 출력

            console.log($(ele).html());

        }

    };

})(jQuery);

$(document).ready(function () {

    // 3개의 LI 의 내용들이 콘솔에 출력됩니다.

    $('.lst').printOut();

});

(function($) {

    // `printOut` 이라는 jQuery 플러그인 등록

    $.fn.printOut = function() {

        // `return` 이 추가되었습니다.

        // 여기서 return 을 하므로, 다음과 같은 호출이 가능합니다.

        // $(selector).printOut().setBorder();

        return this.each(function(idx, ele) {

            console.log($(ele).html());

        }

    };

    // 선택된 HTML Element 에 red border 를 설정하는 플러그인

    $.fn.setBorder = function() {

        return this.each(function (idx, ele) {

            $(ele).css({'border': '1px solid red'});

        });

    };

})(jQuery);

$(document).ready(function () {

    // 3개의 LI 의 내용들이 콘솔에 출력됩니다.

    // 그리고 각 LI 에 border 가 red 로 설정됩니다.

    $('.lst').printOut().setBorder();

});

(function($) {

    $.fn.printOut = function() {

        return this.each(function(idx, ele) {

            console.log($(ele).html());

        }

    };

    // options 를 파라미터로 받습니다.

    $.fn.setBorder = function(options) {

        // 기본 설정값은 'border_color' 가 'red' 로 되어있습니다.

        // 이 설정을 파라미터로 넘어온 options 와 병합합니다.

        // 즉, 기본값은 'red' 이지만 사용자가 options 를 통해 색을 변경할 수 있습니다.

        let settings = $.extend({

            border_color: 'red'

        }, options);

        return this.each(function (idx, ele) {

            // `settings.border_color` 로 border 를 설정합니다.

            $(ele).css({'border': '1px solid '+settings.border_color});

        });

    };

})(jQuery);

$(document).ready(function () {

    // setBorder 플러그인에 {border_color: 'red'} 를 넘깁니다.

    // 위의 setBorder(options) 의 `options` 가 {border_color: 'red'} 인거죠.

    // 이렇게 하면, 화면에 LI 내용들이 3개 출력되고 각 LI 들에 파란색 border 가 생깁니다.

    $('.lst').printOut().setBorder({border_color: 'blue'});

});

    탭 메뉴1

    탭 메뉴2

    탭 메뉴3

    탭 메뉴4

    탭 메뉴5





    탭 컨텐츠 1

    탭 컨텐츠 2

    탭 컨텐츠 3

    탭 컨텐츠 4

    탭 컨텐츠 5





(function($) {

    // JQuery 플러그인에 등록

    // - options: 사용자 지정 옵션

    $.fn.myTab = function(options) {

        // 옵션을 기본 설정과 병합

        let settings = $.extend({

            onBeforeTabChange : null,

            onAfterTabChange : null,

        }, options);

        // 지정된 selector 에 해당하는 모든 elements 들을 순회

        // jQuery chainning 을 위해 반환

        return this.each(function() {

            // $(this) 는 $(메뉴) 에 해당함

            $(this).each(function (idx, ele) {

                // 탭 메뉴 레퍼 (UL)

                let $tabMenu = $(ele);

                // 각 메뉴들 (LI 태그)

                let $menuItems = $tabMenu.find("li");

                // 탭 패널들 (UL 태그의 'data-panel-wrapper' 속성을 읽어와 그 안의 '.tab-panel' 클래스들을 찾음)

                let $tabPanels = $('#' + $tabMenu.data('panel-wrapper')).find('.tab-panel');

                // 메뉴 클릭 이벤트 핸들러

                function setSelectItem($item) {

                    // onBeforeTabChange 가 옵션으로 설정되었다면 호출

                    if (settings.onBeforeTabChange) {

                        settings.onBeforeTabChange($item);

                    }

                    $menuItems.removeClass('select');

                    $item.addClass('select');

                    $tabPanels.removeClass('select');

                    let $clickedPanel = $tabPanels.eq($item.index());

                    $clickedPanel.addClass('select');

                    // onAfterTabChange 가 옵션으로 설정되었다면 호출

                    if (settings.onAfterTabChange) {

                        settings.onAfterTabChange($item, $clickedPanel);

                    }

                }

                // 클릭 이벤트 등록

                $menuItems.click(function () {

                    setSelectItem($(this));

                });

            });

        });

    };

})(jQuery);

$(document).ready(function () {

    $('.tabMenu').myTab({

        // 탭이 클릭된 후 메뉴가 변경되기 바로 직전 호출

        // - $menu : 클릭된 메뉴

        onBeforeTabChange: function($menu) {

            console.log('before tab change : ', $menu);

        },

        // 탭이 클릭된 후 메뉴가 변경된 바로 직후 호출

        // - $menu : 클릭된 메뉴

        // - $panel : 선택된 탭 패널

        onAfterTabChange: function($menu, $panel) {

            console.log('after tab change : ', $menu, $panel);

        }

    });

});

    탭 메뉴1

    탭 메뉴2

    탭 메뉴3

    탭 메뉴4

    탭 메뉴5





    탭 컨텐츠 1

    탭 컨텐츠 2

    탭 컨텐츠 3

    탭 컨텐츠 4

    탭 컨텐츠 5





        $(document).ready(function () {

            MyTab('.tabMenu');

        });

        // 탭메뉴 기능 구현하기

        function MyTab(selector) {

            $(selector).each(function(idx, ele) {

                // 탭 메뉴 레퍼 (UL)

                let $tabMenu = $(ele);

                // 각 메뉴들 (LI 태그)

                let $menuItems = $tabMenu.find("li");

                // 탭 패널들 (UL 태그의 'data-panel-wrapper' 속성을 읽어와 그 안의 '.tab-panel' 클래스들을 찾음)

                let $tabPanels = $('#'+$tabMenu.data('panel-wrapper')).find('.tab-panel');

                // 메뉴 클릭 이벤트 핸들러

                function setSelectItem($item) {

                    $menuItems.removeClass('select');

                    $item.addClass('select');

                    $tabPanels.removeClass('select');

                    $tabPanels.eq($item.index()).addClass('select');

                }

                // 클릭 이벤트 등록

                $menuItems.click(function () {

                    setSelectItem($(this));

                });

            });

        }