/**
* @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} swiping enable swiping on mobile (default true)
+ * @cfg {Boolean} touchSlide if swiping slides tab to next panel (default off)
*
*
* @constructor
html: false,
tabId: false,
navId : false,
- swiping : true,
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;
},
}
}
- if(this.href.length){
- this.el.on('click', this.onClick, this);
- }
+ this.el.on('click', this.onClick, this);
- if(Roo.isTouch && this.swiping){
+ 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);
{
e.preventDefault();
+ if(!this.href.length){
+ return;
+ }
+
window.location.href = this.href;
},
startY : 0,
endX : 0,
endY : 0,
+ swiping : false,
onTouchStart : function(e)
{
- e.preventDefault();
+ this.swiping = false;
this.startX = e.browserEvent.touches[0].clientX;
this.startY = e.browserEvent.touches[0].clientY;
onTouchMove : function(e)
{
- e.preventDefault();
+ this.swiping = true;
this.endX = e.browserEvent.touches[0].clientX;
this.endY = e.browserEvent.touches[0].clientY;
onTouchEnd : function(e)
{
- e.preventDefault();
+ if(!this.swiping){
+ this.onClick(e);
+ return;
+ }
var tabGroup = this.parent();
- Roo.log('this.endX - this.startX');
- Roo.log(this.endX - this.startX);
-
- if(this.endX - this.startX > 10 ){ // 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 > 10){ // swiping left
+ if(this.startX > this.endX){ // swiping left
tabGroup.showPanelNext();
return;
}
-
- if(this.href.length){
- this.onClick(e);
- }
-
}