0

以下のコードでは、次を使用してインスタンスを作成できます。

新しい TabBuilder();

ここで、別の構成値でインスタンスを作成しようとしました。次を使用します。

new TabBuilder({effect:'none', duration:500, tabContainer:'.tab-new', tab:'.tab'})

しかし、それは仕事ではありません。誰かが助けることができますか?

var TabBuilder = Class.create();
TabBuilder.prototype = {
    config:
    {  
        effect: 'none',
        duration: 300,
        tabContainer: '.tab-container',
        tab: '.tab'
    },

    initialize: function(settings)
    {
        Object.extend(this.config, settings);
        $$(this.config.tabContainer).each(function(el){
            this.buildTabs(el)
                .setActiveTab(el, 0)
                .addObservers(el);
        }.bind(this))
    },

    buildTabs: function(container)
    {
        var tabs = new Element('ol')
            .addClassName('tabs');

        container.insert({'bottom': tabs});

        var tabsContent = new Element('div')
            .addClassName('content')

        tabs.insert({'after': tabsContent});

        $(container).select(this.config.tab).each(function(el) {
            var tab = $(el).select('.head')[0].wrap('li');
            tabs.insert({'bottom': tab});

            var tabContent = $(el).select('.content')[0];
            tabContent.removeClassName('content').addClassName('tab');
            tabsContent.insert({'bottom': tabContent});
            $(el).remove();
        })
        $$('.tabs li:first-child')[0].addClassName('first');
        $$('.tabs li:last-child')[0].addClassName('last');
        return this;
    },

    setActiveTab: function(container, index)
    {
        this._switchTabDisplay(container, index);
        return this;
    },

    addObservers: function(container)
    {
        var that = this;
        $(container).select('.tabs li').each(function(el, index) {
            el.observe('mouseover', function() {
                that.setActiveTab(container, index)
            });
            el.observe('mouseover', function(el) {
                $(this).addClassName('over');
            })
            el.observe('mouseout', function(el) {
                $(this).removeClassName('over');
            })
        })
        return this;
    },

    _switchTabDisplay: function(container, index)
    {
        $(container).select('.tabs li, .content .tab').invoke('removeClassName', 'active');
        $(container).select('.tabs li')[index].addClassName('active');
        $(container).select('.content .tab')[index].addClassName('active');
        $(container).select('.content .tab').invoke('setStyle', {'display': 'none'});
        $(container).select('.content .tab')[index].setStyle({'display': 'block'});
    }

}
4

0 に答える 0