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