Question

我正在使用 YUI TabView小部件来添加和删除yuilibrary-tabview-add-remove中描述的标签。

我注意到“bug”或者可能只是缺少功能：当您关闭所有标签然后添加新标签时，“添加标签”按钮将会在标签栏的左侧显示卡住，并且所有新标签都会在右侧排序。如果您没有关闭所有标签，则无论如何，该按钮将始终保持在右侧。

现在，我添加了解决方法：添加新标签页时，将检测到no-tabs状态，并且DOM li-item将使用 jQuery进行排序 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/

YUI TabView：当所有标签都关闭时，“添加标签”按钮卡在左侧

1 个答案: