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: 'span',
  53             //     cls: 'pull-left header',
  54             //     html: this.title ? this.title : 'Title',
  55             // },
  56             {
  57                 tag: 'ul',
  58                 cls: 'nav nav-tabs pull-right',
  59                 cn: [{
  60                     tag: 'li',
  61                     cls: 'active',
  62                     html: null,
  63                     cn : [{
  64                         tag: 'a',
  65                         href: '#',
  66                         // data-toggle: 'tab',
  67                         html: this.tab1_text ? this.tab1_text : 'tab1'
  68                     }]
  69                 },
  70                 {
  71                     tag: 'li',
  72                     cls: '',
  73                     html: null,
  74                     cn : [{
  75                         tag: 'a',
  76                         href: '#',
  77                         // data-toggle: 'tab',
  78                         html: this.tab2_text ? this.tab2_text : 'tab2'
  79                     }]
  80                 },
  81                 {
  82                     tag: 'li',
  83                     cls: 'pull-left header',
  84                     html: this.title ? this.title : 'Title',
  85                     cn : [{
  86                         tag: 'i',
  87                         cls: 'fa fa-inbox',
  88                     }]
  89                 }]
  90             }]
  91         }
  92
  93         return  cfg;
  94     },
  95
  96     initEvents: function() {
  97
  98         // if(!this.href){
  99         //     this.el.on('click', this.onClick, this);
 100         // }
 101         var _this = this;
 102         Roo.each(_this.el.select('li',true).elements, function(el){
 103             Roo.log(el);
 104             el.on('click', _this.onClick, el);
 105         })
 106     },
 107
 108     onClick : function(e)
 109     {
 110         Roo.log('img onclick');
 111
 112         this.findParent('ul',false, true).select('li.active').removeClass('active');
 113         this.addClass('active');
 114         Roo.log(this);
 115             //this.el.select('li.active',true).first().removeClass('active');
 116
 117            // Roo.get(e.target).findParent('li',false, true).addClass('active');
 118
 119         //this.fireEvent('toggle', this, e);
 120
 121     }
 122
 123 });
 124
 125