YUI TabView：关闭所有选项卡时，“添加选项卡”按钮卡在左侧

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/