YUI TabView: кнопка «добавить вкладку» застряла на левой стороне, когда все вкладки закрыты.

Question

Я использую виджет YUI TabView для добавления и удаления вкладок, как описано в yuilibrary-tabview-add-remove.

Я заметил «ошибку» или, возможно, просто не хватает функциональность: При закрытии всех вкладок, а затем добавить новую вкладку, то «добавить закладку» кнопка получите застряла на левой стороне панели вкладок, и все новые вкладки будут отсортированы с правой стороны. Если вы не закрываете все вкладки, кнопка всегда останется на правой стороне, несмотря ни на что.

Теперь я добавил обходной: При добавлении новой вкладки, состояние не-вкладки будут обнаружены и DOM литиево-элемент будет отсортирован с JQuery после метода(). Наконец, будет выбрана новая добавленная вкладка:

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

    // When previously no tabs present, move 'add button' to end after adding a new tab 
    if (tabview.size() == 1) { 
    var addTabButton = $('#addTabButton'); 
    addTabButton.next().after(addTabButton); 
    tabview.selectChild(0); 
    }; 
} 

Однако, я не доволен этим решением. Может ли быть более элегантный способ решить эту проблему?

Answer 1

Ваше решение определенно верно. Я просто напишу его с помощью YUI, потому что загрузка YUI и jQuery действительно дорого в килограммах и стоимости обслуживания (вам и вашим коллегам необходимо овладеть двумя библиотеками).

Один чистый вариант заключается в создании узла в инициализаторе и сохранить ссылку на него, так что вы можете переместить его позже:

initializer: function (config) { 
    var tabview = this.get('host'); 

    // create the node before rendering and keep a reference to it 
    this._addNode = Y.Node.create(this.ADD_TEMPLATE); 

    tabview.after('render', this.afterRender, this); 

    tabview.get('contentBox') 
    .delegate('click', this.onAddClick, '.yui3-tab-add', this); 
}, 

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

afterRender: function (e) { 
    this._appendAddNode(); 
}, 

onAddClick: function (e) { 
    e.stopPropagation(); 

    var tabview = this.get('host'), input = this.getTabInput(); 
    tabview.add(input, input.index); 

    // When previously no tabs present, move 'add button' to end after adding a new tab 
    if (tabview.size() == 1) { 
    // _addNode will already be present, but by using append() it'll be moved to the 
    // last place in the list 
    this._appendAddNode(); 
    }; 
} 

Вот рабочая версия: http://jsbin.com/iLiM/2/