* TabBox
*
*/
-
+Roo.bootstrap.dash = Roo.bootstrap.dash || {};
/**
* @class Roo.bootstrap.dash.TabBox
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.dash.TabPane
* Bootstrap TabBox class
- * @cfg {String} title
- * @cfg {String} tab1_text
- * @cfg {String} tab2_text
+ * @cfg {String} title Title of the TabBox
+ * @cfg {String} icon Icon of the TabBox
+ * @cfg {Boolean} showtabs (true|false) show the tabs default true
+ * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
*
* @constructor
- * Create a new Input
+ * Create a new TabBox
* @param {Object} config The config object
*/
-Roo.bootstrap.dash = Roo.bootstrap.dash || {};
+
Roo.bootstrap.dash.TabBox = function(config){
Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
-
this.addEvents({
- // img events
+ // raw events
+ /**
+ * @event addpane
+ * When a pane is added
+ * @param {Roo.bootstrap.dash.TabPane} pane
+ */
+ "addpane" : true,
/**
- * @event click
- * The img click event for the img.
- * @param {Roo.EventObject} e
+ * @event activatepane
+ * When a pane is activated
+ * @param {Roo.bootstrap.dash.TabPane} pane
*/
- "click" : true
+ "activatepane" : true
+
+
});
+
+ this.panes = [];
};
Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component, {
-
-
- title: '',
- tab1_text: '',
- tab2_text: '',
+ title : '',
+ icon : false,
+ showtabs : true,
+ tabScrollable : false,
+
+ getChildContainer : function()
+ {
+ return this.el.select('.tab-content', true).first();
+ },
+
getAutoCreate : function(){
+ var header = {
+ tag: 'li',
+ cls: 'pull-left header',
+ html: this.title,
+ cn : []
+ };
+
+ if(this.icon){
+ header.cn.push({
+ tag: 'i',
+ cls: 'fa ' + this.icon
+ });
+ }
+
+ var h = {
+ tag: 'ul',
+ cls: 'nav nav-tabs pull-right',
+ cn: [
+ header
+ ]
+ };
+
+ if(this.tabScrollable){
+ h = {
+ tag: 'div',
+ cls: 'tab-header',
+ cn: [
+ {
+ tag: 'ul',
+ cls: 'nav nav-tabs pull-right',
+ cn: [
+ header
+ ]
+ }
+ ]
+ };
+ }
+
var cfg = {
tag: 'div',
cls: 'nav-tabs-custom',
- html : null,
cn: [
- // {
- // tag: 'span',
- // cls: 'pull-left header',
- // html: this.title ? this.title : 'Title',
- // },
- {
- tag: 'ul',
- cls: 'nav nav-tabs pull-right',
- cn: [{
- tag: 'li',
- cls: 'active',
- html: null,
- cn : [{
- tag: 'a',
- href: '#',
- // data-toggle: 'tab',
- html: this.tab1_text ? this.tab1_text : 'tab1'
- }]
- },
- {
- tag: 'li',
- cls: '',
- html: null,
- cn : [{
- tag: 'a',
- href: '#',
- // data-toggle: 'tab',
- html: this.tab2_text ? this.tab2_text : 'tab2'
- }]
- },
+ h,
{
- tag: 'li',
- cls: 'pull-left header',
- html: this.title ? this.title : 'Title',
- cn : [{
- tag: 'i',
- cls: 'fa fa-inbox'
- }]
- }]
- }]
- }
+ tag: 'div',
+ cls: 'tab-content no-padding',
+ cn: []
+ }
+ ]
+ };
return cfg;
},
-
- initEvents: function() {
-
- // if(!this.href){
- // this.el.on('click', this.onClick, this);
- // }
- var _this = this;
- Roo.each(_this.el.select('li',true).elements, function(el){
- Roo.log(el);
- el.on('click', _this.onClick, el);
- })
+ initEvents : function()
+ {
+ //Roo.log('add add pane handler');
+ this.on('addpane', this.onAddPane, this);
+ },
+ /**
+ * Updates the box title
+ * @param {String} html to set the title to.
+ */
+ setTitle : function(value)
+ {
+ this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
+ },
+ onAddPane : function(pane)
+ {
+ this.panes.push(pane);
+ //Roo.log('addpane');
+ //Roo.log(pane);
+ // tabs are rendere left to right..
+ if(!this.showtabs){
+ return;
+ }
+
+ var ctr = this.el.select('.nav-tabs', true).first();
+
+
+ var existing = ctr.select('.nav-tab',true);
+ var qty = existing.getCount();;
+
+
+ var tab = ctr.createChild({
+ tag : 'li',
+ cls : 'nav-tab' + (qty ? '' : ' active'),
+ cn : [
+ {
+ tag : 'a',
+ href:'#',
+ html : pane.title
+ }
+ ]
+ }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
+ pane.tab = tab;
+
+ tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
+ if (!qty) {
+ pane.el.addClass('active');
+ }
+
+
+ },
+ onTabClick : function(ev,un,ob,pane)
+ {
+ //Roo.log('tab - prev default');
+ ev.preventDefault();
+
+
+ this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
+ pane.tab.addClass('active');
+ //Roo.log(pane.title);
+ this.getChildContainer().select('.tab-pane',true).removeClass('active');
+ // technically we should have a deactivate event.. but maybe add later.
+ // and it should not de-activate the selected tab...
+ this.fireEvent('activatepane', pane);
+ pane.el.addClass('active');
+ pane.fireEvent('activate');
+
+
},
- onClick : function(e)
+ getActivePane : function()
{
- Roo.log('img onclick');
-
- this.findParent('ul',false, true).select('li.active').removeClass('active');
- this.addClass('active');
- Roo.log(this);
- //this.el.select('li.active',true).first().removeClass('active');
-
- // Roo.get(e.target).findParent('li',false, true).addClass('active');
-
- //this.fireEvent('toggle', this, e);
-
+ var r = false;
+ Roo.each(this.panes, function(p) {
+ if(p.el.hasClass('active')){
+ r = p;
+ return false;
+ }
+
+ return;
+ });
+
+ return r;
}
-
+
+
});
projects / roojs1 / blobdiff