탭메뉴 플러그인(자동롤링)

탭 메뉴

자동 롤링되는 탭메뉴 플러그인

jquery 1.x.x 지원

(function($){

    $.extend($.fn, {
        tabModule : function(options) {

            $.fn.tabModule.defaults = {
                selector : 'a',
                tabContWrap : 'tabGroup',
                tabContents : 'tab-cont',
                speed : 400,
                visibleCont : 1,
                autoRolling : false,
                roofTime : 2000,
                animate : false,
                autoControl : false
            };

            return this.each(function(){
                var that = $(this),
                    opts = $.extend({}, $.fn.tabModule.defaults, options || {}),
                    auto = true,
                    intervalId = null,
                    currIdx = 0,
                    stop;
                that.data('tabList',that.closest('ul'));
                that.data('autoCtrl', $('.btn-ctrl > a'));

                that.find(opts.selector).on('click focus', function(){
                    var target = $(this),
                        idx = $(this).parent().index();
                    currIdx = idx;
                    showTab(target, idx);
                    return false;
                });

                function showTab(target, idx) {
                    target.parent().radioClass();
                    var displayTab = $('.' +opts.tabContWrap).children().eq(idx);

                    if(!opts.animate) {
                        displayTab.show().siblings().hide();
                    } else {
                        displayTab.stop().fadeTo(opts.speed, 1)
                                .siblings().stop().fadeTo(opts.speed, 0);
                    }
                }

                opts.autoRolling ? intervalId = setInterval(rollingTab, opts.roofTime) :
                        that.find(opts.selector).eq(opts.visibleCont - 1).trigger('click');

                function rollingTab() {
                    currIdx++;
                    if (currIdx == $('.' + opts.tabContents).length) {
                        currIdx = 0;
                    }
                    that.find(opts.selector).eq(currIdx).trigger('click');
                }

                that.data('tabList').on({
                    'mouseenter': function(){
                        // if(!auto) return false;
                        clearInterval(intervalId);
                    },
                    'mouseleave': function(){
                        if(stop == 'stop' || (opts.autoRolling == false)) return false;
                        intervalId = setInterval(rollingTab, opts.roofTime);
                    }
                });

                !opts.autoControl ? that.data('autoCtrl').parent().hide() : that.data('autoCtrl').parent().show();

                that.data('autoCtrl').on({
                    click : function() {
                        var _self = $(this),
                            status = _self.attr('class');
                        if(status == 'stop') {
                            _self.attr('class','play');
                            _self.find('img').imgReplace('stop','play');
                            clearInterval(intervalId);
                        } else {
                            _self.attr('class','stop');
                            _self.find('img').imgReplace('play','stop')
                            intervalId = setInterval(rollingTab, opts.roofTime);
                        }
                        stop = status;
                    }
                })

            });
        },

        radioClass : function(opts) {
            $.fn.radioClass.defaults = {className : 'on'};
            opts = $.extend({}, $.fn.radioClass.defaults, opts || {})
            return this.each(function(){
                $(this).siblings('.' + opts.className).removeClass(opts.className).end().addClass(opts.className);
            });
        },

        imgReplace : function(img1, img2) {
            return this.each(function(){
                var target = $(this);
                target.attr('src', function(){
                    return $(this).attr('src').replace(img1, img2)
                })
            })
        }
    })



})(jQuery)

$('.tabList').tabModule({
    animate : true
});

See the Pen vNggNG by jaeheekim (@jaehee) on CodePen.

파일 참고

tab_plubIn_complete.html