/**
* @class Roo.bootstrap.TabPanel
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
* Bootstrap TabPanel class
* @cfg {Boolean} active panel active
* @cfg {String} html panel content
* @cfg {String} tabId unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
- * @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
+ * @cfg {String} navId The Roo.bootstrap.nav.Group which triggers show hide ()
* @cfg {String} href click to link..
+ * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
*
*
* @constructor
tabId: false,
navId : false,
href : '',
-
+ touchSlide : false,
getAutoCreate : function(){
- var cfg = {
+
+
+ var cfg = {
tag: 'div',
// item is needed for carousel - not sure if it has any effect otherwise
- cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
+ cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
html: this.html || ''
};
cfg.tabId = this.tabId;
}
+
return cfg;
},
this.el.on('click', this.onClick, this);
- if(Roo.isTouch){
+ if(Roo.isTouch && this.touchSlide){
this.el.on("touchstart", this.onTouchStart, this);
this.el.on("touchmove", this.onTouchMove, this);
this.el.on("touchend", this.onTouchEnd, this);
onTouchStart : function(e)
{
- e.preventDefault();
-
this.swiping = false;
this.startX = e.browserEvent.touches[0].clientX;
onTouchMove : function(e)
{
- e.preventDefault();
-
this.swiping = true;
this.endX = e.browserEvent.touches[0].clientX;
onTouchEnd : function(e)
{
- e.preventDefault();
-
if(!this.swiping){
this.onClick(e);
return;
var tabGroup = this.parent();
- if(this.endX - this.startX > 20 ){ // swiping right
+ if(this.endX > this.startX){ // swiping right
tabGroup.showPanelPrev();
return;
}
- Roo.log('this.startX - this.endX');
- Roo.log(this.startX - this.endX);
-
- if(this.startX - this.endX > 20){ // swiping left
+ if(this.startX > this.endX){ // swiping left
tabGroup.showPanelNext();
return;
}
-
- if(){
- this.onClick(e);
- }
-
}