9 * @class Roo.bootstrap.TabPanel
10 * @extends Roo.bootstrap.Component
11 * @children Roo.bootstrap.Component
12 * Bootstrap TabPanel class
13 * @cfg {Boolean} active panel active
14 * @cfg {String} html panel content
15 * @cfg {String} tabId unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
16 * @cfg {String} navId The Roo.bootstrap.nav.Group which triggers show hide ()
17 * @cfg {String} href click to link..
18 * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
22 * Create a new TabPanel
23 * @param {Object} config The config object
26 Roo.bootstrap.TabPanel = function(config){
27 Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
31 * Fires when the active status changes
32 * @param {Roo.bootstrap.TabPanel} this
33 * @param {Boolean} state the new state
38 * @event beforedeactivate
39 * Fires before a tab is de-activated - can be used to do validation on a form.
40 * @param {Roo.bootstrap.TabPanel} this
41 * @return {Boolean} false if there is an error
44 'beforedeactivate': true
47 this.tabId = this.tabId || Roo.id();
51 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, {
59 getAutoCreate : function(){
64 // item is needed for carousel - not sure if it has any effect otherwise
65 cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
74 cfg.tabId = this.tabId;
82 initEvents: function()
84 var p = this.parent();
86 this.navId = this.navId || p.navId;
88 if (typeof(this.navId) != 'undefined') {
89 // not really needed.. but just in case.. parent should be a NavGroup.
90 var tg = Roo.bootstrap.TabGroup.get(this.navId);
94 var i = tg.tabs.length - 1;
96 if(this.active && tg.bullets > 0 && i < tg.bullets){
97 tg.setActiveBullet(i);
101 this.el.on('click', this.onClick, this);
103 if(Roo.isTouch && this.touchSlide){
104 this.el.on("touchstart", this.onTouchStart, this);
105 this.el.on("touchmove", this.onTouchMove, this);
106 this.el.on("touchend", this.onTouchEnd, this);
111 onRender : function(ct, position)
113 Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
116 setActive : function(state)
118 Roo.log("panel - set active " + this.tabId + "=" + state);
122 this.el.removeClass('active');
124 } else if (!this.el.hasClass('active')) {
125 this.el.addClass('active');
128 this.fireEvent('changed', this, state);
131 onClick : function(e)
135 if(!this.href.length){
139 window.location.href = this.href;
148 onTouchStart : function(e)
150 this.swiping = false;
152 this.startX = e.browserEvent.touches[0].clientX;
153 this.startY = e.browserEvent.touches[0].clientY;
156 onTouchMove : function(e)
160 this.endX = e.browserEvent.touches[0].clientX;
161 this.endY = e.browserEvent.touches[0].clientY;
164 onTouchEnd : function(e)
171 var tabGroup = this.parent();
173 if(this.endX > this.startX){ // swiping right
174 tabGroup.showPanelPrev();
178 if(this.startX > this.endX){ // swiping left
179 tabGroup.showPanelNext();