javascript - YUI TabView: "add tab" button stuck on the left side when all tabs are closed -
i'm using yui tabview widget adding , removing tabs described in yuilibrary-tabview-add-remove.
i've noticed "bug" or maybe missing functionality: when close tabs , add new tab, "add tab" button stuck on left side of tab bar, , new tabs sorted on right side. if don't close tabs, button stay on right side no matter what.
now, i've added workaround: when adding new tab, no-tabs state detected , dom li-item sorted jquery after() method. finally, newly added tab selected:
onaddclick : function(e) { e.stoppropagation(); var tabview = this.get('host'), input = this.gettabinput(); tabview.add(input, input.index); // when no tabs present, move 'add button' end after adding new tab if ( tabview.size() == 1) { var addtabbutton = $('#addtabbutton'); addtabbutton.next().after(addtabbutton); tabview.selectchild(0); }; } however, i'm not happy solution. might there more elegant way solve issue?
your solution valid. i'd write using yui because loading yui , jquery expensive in kweight , maintenance cost (you , coworkers need master 2 libraries).
one clean option create node in initializer , keep reference can move around later:
initializer: function (config) { var tabview = this.get('host'); // create node before rendering , keep reference 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 no tabs present, move 'add button' end after adding new tab if ( tabview.size() == 1) { // _addnode present, using append() it'll moved // last place in list this._appendaddnode(); }; } here's working version: http://jsbin.com/ilim/2/
Comments
Post a Comment