primefaces / primeui

Rich set of javascript-css only widgets
http://www.primefaces.org/primeui
283 stars 125 forks source link

Add tab for tabview dynamically #216

Open zsuiqiang opened 8 years ago

zsuiqiang commented 8 years ago

Please offer a method to add tab for tabview dynamically.

CODEheures commented 8 years ago

code to add to function() { $.widget("primeui.puitabview", {...

use: $('#default').puitabview('add', 'myNewPanelName', 'MyNewPanelId', 'MyInnerPanelHTML');

add: function(panelName, panelId, panelHtml) {
            var element = this.element;
            this.navContainer = element.children('ul');
            this.newTabHeaders = $('<li><a href="' + panelId + '">' + panelName + '</a></li>').appendTo(this.navContainer);
            this.newTabHeaders.addClass('ui-state-default ui-corner-top');

            this.panelContainer = element.children('div');

            this.newPanel = $('<div id="' + panelId + '"></div>').appendTo(this.panelContainer);
            this.newPanel.append(panelHtml);
            this.newPanel.addClass('ui-tabview-panel ui-widget-content ui-corner-bottom');
            this.newPanel.addClass('ui-helper-hidden');
            this.tabHeaders = this.navContainer.children('li');
            this._resolvePanelMode();
            this.panels = this._findPanels();

            this.tabHeaders.eq(this.options.activeIndex).addClass('ui-tabview-selected ui-state-active');

            this._unbindEvents();
            this._bindEvents();
        },