javascript - YUI 选项卡 View : "add tab" button stuck on the left side when all tabs are closed

Question

我正在使用 YUI TabView 小部件来添加和删除选项卡，如 yuilibrary-tabview-add-remove 中所述。 .

我注意到一个“错误”或者可能只是缺少一个功能:当您关闭所有选项卡然后添加新选项卡时，“添加选项卡”按钮将会卡在标签栏的左侧，并且所有新标签都将在右侧排序。如果您不关闭所有选项卡，则该按钮无论如何都会始终位于右侧。

现在，我添加了一个解决方法:添加新选项卡时，将检测无选项卡状态，并且将使用 jQuery 对 DOM li-item 进行排序强> after() 方法。最后，新添加的选项卡将被选中:

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 在 kweight 和维护成本方面非常昂贵(您和您的同事需要掌握两个库)。

一个干净的选择是在初始化程序中创建一个节点并保留对其的引用，以便您以后可以移动它:

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/