git.roojs.org Git - roojs1/blob - Roo/bootstrap/dash/TabBox.js

   1 /*
   2  * - LGPL
   3  *
   4  * TabBox
   5  *
   6  */
   7
   8
   9 /**
  10  * @class Roo.bootstrap.dash.TabBox
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap TabBox class
  13  * @cfg {String} title
  14  * @cfg {String} tab1_text
  15  * @cfg {String} tab2_text
  16  *
  17  * @constructor
  18  * Create a new Input
  19  * @param {Object} config The config object
  20  */
  21
  22 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
  23 Roo.bootstrap.dash.TabBox = function(config){
  24     Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
  25
  26     this.addEvents({
  27         // img events
  28         /**
  29          * @event click
  30          * The img click event for the img.
  31          * @param {Roo.EventObject} e
  32          */
  33         "click" : true
  34     });
  35 };
  36
  37 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
  38
  39
  40     title: '',
  41     tab1_text: '',
  42     tab2_text: '',
  43
  44     getAutoCreate : function(){
  45
  46         var cfg = {
  47             tag: 'div',
  48             cls: 'nav-tabs-custom',
  49             html : null,
  50             cn: [
  51             {
  52                 tag: 'ul',
  53                 cls: 'nav nav-tabs pull-right',
  54                 cn: [{
  55                     tag: 'li',
  56                     cls: 'active',
  57                     html: null,
  58                     cn : [{
  59                         tag: 'a',
  60                         href: '#',
  61                         // data-toggle: 'tab',
  62                         html: this.tab1_text ? this.tab1_text : 'tab1'
  63                     }]
  64                 },
  65                 {
  66                     tag: 'li',
  67                     cls: '',
  68                     html: null,
  69                     cn : [{
  70                         tag: 'a',
  71                         href: '#',
  72                         // data-toggle: 'tab',
  73                         html: this.tab2_text ? this.tab2_text : 'tab2'
  74                     }]
  75                 // },
  76                 // {
  77                 //     tag: 'li',
  78                 //     cls: 'pull-left header',
  79                 //     html: this.title ? this.title : 'Title',
  80                 //     cn : [{
  81                 //         tag: 'i',
  82                 //         cls: 'fa fa-inbox',
  83                 //     }]
  84                 }]
  85             }]
  86         }
  87
  88         return  cfg;
  89     },
  90
  91     initEvents: function() {
  92
  93         // if(!this.href){
  94         //     this.el.on('click', this.onClick, this);
  95         // }
  96         var _this = this;
  97         Roo.each(_this.el.select('li',true).elements, function(el){
  98             Roo.log(el);
  99             el.on('click', _this.onClick, el);
 100         })
 101     },
 102
 103     onClick : function(e)
 104     {
 105         Roo.log('img onclick');
 106
 107         this.findParent('ul',false, true).select('li.active').removeClass('active');
 108         this.addClass('active');
 109         Roo.log(this);
 110             //this.el.select('li.active',true).first().removeClass('active');
 111
 112            // Roo.get(e.target).findParent('li',false, true).addClass('active');
 113
 114         //this.fireEvent('toggle', this, e);
 115
 116     }
 117
 118 });
 119
 120