* @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} href link to url
+ * @cfg {String} href click to link..
*
*
* @constructor
html: false,
tabId: false,
navId : false,
+ href : '',
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',
+ cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
html: this.html || ''
};
cfg.tabId = this.tabId;
}
+
return cfg;
},
initEvents: function()
{
var p = this.parent();
+
this.navId = this.navId || p.navId;
if (typeof(this.navId) != 'undefined') {
}
}
+ this.el.on('click', this.onClick, this);
+
+ if(Roo.isTouch){
+ this.el.on("touchstart", this.onTouchStart, this);
+ this.el.on("touchmove", this.onTouchMove, this);
+ this.el.on("touchend", this.onTouchEnd, this);
+ }
+
},
-
onRender : function(ct, position)
{
- // Roo.log("Call onRender: " + this.xtype);
-
Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
-
-
-
-
-
},
- setActive: function(state)
+ setActive : function(state)
{
Roo.log("panel - set active " + this.tabId + "=" + state);
}
this.fireEvent('changed', this, state);
+ },
+
+ onClick : function(e)
+ {
+ e.preventDefault();
+
+ if(!this.href.length){
+ return;
+ }
+
+ window.location.href = this.href;
+ },
+
+ startX : 0,
+ startY : 0,
+ endX : 0,
+ endY : 0,
+ swiping : false,
+
+ onTouchStart : function(e)
+ {
+ this.swiping = false;
+
+ this.startX = e.browserEvent.touches[0].clientX;
+ this.startY = e.browserEvent.touches[0].clientY;
+ },
+
+ onTouchMove : function(e)
+ {
+ this.swiping = true;
+
+ this.endX = e.browserEvent.touches[0].clientX;
+ this.endY = e.browserEvent.touches[0].clientY;
+ },
+
+ onTouchEnd : function(e)
+ {
+ if(!this.swiping){
+ this.onClick(e);
+ return;
+ }
+
+ var tabGroup = this.parent();
+
+ if(this.endX > this.startX){ // swiping right
+ tabGroup.showPanelPrev();
+ return;
+ }
+
+ if(this.startX > this.endX){ // swiping left
+ tabGroup.showPanelNext();
+ return;
+ }
}