0

yulibrary-tabview-add-remove で説明されているように、タブを追加および削除するためにYUI TabView ウィジェットを使用しています。

すべてのタブを閉じてから新しいタブを追加すると、「タブの追加」ボタンがタブバーの左側に表示されなくなり、すべての新しいタブが表示されなくなります。右側に並べます。すべてのタブを閉じないと、ボタンは常に右側に表示されたままになります。

ここで、回避策を追加しました。新しいタブを追加すると、タブなし状態が検出され、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);
  };
}

しかし、私はこの解決策に満足していません。この問題を解決するためのよりエレガントな方法があるでしょうか?

4

1 に答える 1

2

あなたの解決策は間違いなく有効です。YUI と jQuery をロードすると、kweight とメンテナンス コストが非常に高くつくため、YUI を使用して記述します (あなたと同僚は 2 つのライブラリをマスターする必要があります)。

クリーンなオプションの 1 つは、イニシャライザでノードを作成し、後で移動できるように参照を保持することです。

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/

于 2013-08-20T13:23:35.837 に答える