Как добавить новую вкладку в виджет YUI3 Tabview без помощи плагина Addable - PullRequest
Новая
       6

Как добавить новую вкладку в виджет YUI3 Tabview без помощи плагина Addable

0 голосов
/ 27 января 2011

В настоящее время я использую подключаемый модуль Tabview , который запускается пользователем при нажатии кнопки добавления виджета Tabview.

Теперь я также хочу динамически добавить вкладку для какого-либо события.

Я попытался выполнить следующий метод, используя метод add (http://developer.yahoo.com/yui/3/api/WidgetParent.html#method_add) из Tabview 


function myJsFunc(name, content){</p>

<pre><code>tabview3.add({
label: name,
content: '<textarea> </textarea>',
index: Number(tabview3.size())});

}

Здесь tabview3 является глобальным объектомВиджет Tabview. Это, похоже, не работает. Есть что-то, чего мне не хватает? Любая помощь приветствуется.

Ответы [ 2 ]

2 голосов
/ 28 апреля 2011

Следующее позволит вам создать две кнопки для добавления и удаления вкладок. 

...
<input type="button" id="addTabButton" value="Add Tab" />

<input type="button" id="removeTabButton" value="Remove Tab" />

...
var addTab = function(e) {
    e.preventDefault();
input = {"label":"test","content":"TestContent","index":"2"};
    mainTabView.add(input, input.index);
}

Y.on("click", addTab, ["#addTabButton"]);

var removeTab = function(e) {
    e.preventDefault();
    mainTabView.remove(1);
}

Y.on("click", removeTab, ["#removeTabButton"]);

var mainTabView = new Y.TabView({
srcNode:'#TheMainTabView',
    plugins: [Addable, Removeable]
});
mainTabView.render();
...
0 голосов
/ 17 марта 2011

Я столкнулся с той же проблемой с YUI3.Никогда не мог понять это.Если бы я мог перезапустить проект, я бы пошел с YUI2.Существует гораздо больше документации по YUI2, не говоря уже о том, что tabview все еще находится в бета-версии для v3.

При этом я обошел его, используя следующий код: 

 var Addable = function(config) {
    Addable.superclass.constructor.apply(this, arguments);
};

Addable.NAME = 'addableTabs';
Addable.NS = 'addable';

Y.extend(Addable, Y.Plugin.Base, {
    ADD_TEMPLATE: '<li class="yui3-tab" title="Add Your Own Custom Tab!">' +
                '<a class="yui3-tab-label yui3-tab-add">+</a></li>',

    initializer: function(config) {
        var tabview = this.get('host');
        tabview.after('render', this.afterRender, this);
        tabview.get('contentBox')
            .delegate('click', this.onAddClick, '.yui3-tab-add', this);
    },

    getTabInput: function() {
        var tabview = this.get('host');
        return {
            label: window.prompt('What do you want to call this tab?:', 'foo'),
            content: window.prompt('Page Url. Replace foo.com with whatever page you want loaded.', '<iframe src="http://www.foo.com" width="100%" height="850px" frameborder="0"></iframe>'),
            index: Number(window.prompt('What tab number would you like this to be (0 = first):', tabview.size()))
        }
    },



    afterRender: function(e) {
        var tabview = this.get('host');
        tabview.get('contentBox').one('> ul').append(this.ADD_TEMPLATE);
    },

    onAddClick: function(e) {
        e.stopPropagation();
        var tabview = this.get('host'),
            input = this.getTabInput();
        tabview.add(input, input.index);
    }
});
...