git.roojs.org Git - roojs1/blob - docs/src/Roo_bootstrap_dash_TabBox.js.html

   1 <html><head><title>Roo/bootstrap/dash/TabBox.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * - LGPL
   3  *
   4  * TabBox
   5  *
   6  */
   7 </span><span class="jsdoc-var">Roo.bootstrap.dash </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.bootstrap.dash </span><span class="jsdoc-syntax">|| {};
   8
   9 </span><span class="jsdoc-comment">/**
  10  * @class Roo.bootstrap.dash.TabBox
  11  * @extends Roo.bootstrap.Component
  12  * @children Roo.bootstrap.dash.TabPane
  13  * Bootstrap TabBox class
  14  * @cfg {String} title Title of the TabBox
  15  * @cfg {String} icon Icon of the TabBox
  16  * @cfg {Boolean} showtabs (true|false) show the tabs default true
  17  * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
  18  *
  19  * @constructor
  20  * Create a new TabBox
  21  * @param {Object} config The config object
  22  */
  23
  24
  25 </span><span class="jsdoc-var">Roo.bootstrap.dash.TabBox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  26     </span><span class="jsdoc-var">Roo.bootstrap.dash.TabBox.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  27     </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
  28         </span><span class="jsdoc-comment">// raw events
  29         /**
  30          * @event addpane
  31          * When a pane is added
  32          * @param {Roo.bootstrap.dash.TabPane} pane
  33          */
  34         </span><span class="jsdoc-string">&quot;addpane&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  35         </span><span class="jsdoc-comment">/**
  36          * @event activatepane
  37          * When a pane is activated
  38          * @param {Roo.bootstrap.dash.TabPane} pane
  39          */
  40         </span><span class="jsdoc-string">&quot;activatepane&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
  41
  42
  43     </span><span class="jsdoc-syntax">});
  44
  45     </span><span class="jsdoc-var">this.panes </span><span class="jsdoc-syntax">= [];
  46 };
  47
  48 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.dash.TabBox</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">,  {
  49
  50     </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  51     </span><span class="jsdoc-var">icon </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  52     </span><span class="jsdoc-var">showtabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  53     </span><span class="jsdoc-var">tabScrollable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  54
  55     </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  56     {
  57         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.tab-content'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
  58     },
  59
  60     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  61
  62         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">header </span><span class="jsdoc-syntax">= {
  63             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'li'</span><span class="jsdoc-syntax">,
  64             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'pull-left header'</span><span class="jsdoc-syntax">,
  65             </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">,
  66             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
  67         };
  68
  69         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.icon</span><span class="jsdoc-syntax">){
  70             </span><span class="jsdoc-var">header.cn.push</span><span class="jsdoc-syntax">({
  71                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
  72                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fa ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.icon
  73             </span><span class="jsdoc-syntax">});
  74         }
  75
  76         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= {
  77             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
  78             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'nav nav-tabs pull-right'</span><span class="jsdoc-syntax">,
  79             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
  80                 </span><span class="jsdoc-var">header
  81             </span><span class="jsdoc-syntax">]
  82         };
  83
  84         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabScrollable</span><span class="jsdoc-syntax">){
  85             </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= {
  86                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  87                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'tab-header'</span><span class="jsdoc-syntax">,
  88                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
  89                     {
  90                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
  91                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'nav nav-tabs pull-right'</span><span class="jsdoc-syntax">,
  92                         </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
  93                             </span><span class="jsdoc-var">header
  94                         </span><span class="jsdoc-syntax">]
  95                     }
  96                 ]
  97             };
  98         }
  99
 100         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
 101             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 102             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'nav-tabs-custom'</span><span class="jsdoc-syntax">,
 103             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 104                 </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">,
 105                 {
 106                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
 107                     </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'tab-content no-padding'</span><span class="jsdoc-syntax">,
 108                     </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
 109                 }
 110             ]
 111         };
 112
 113         </span><span class="jsdoc-keyword">return  </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 114     },
 115     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 116     {
 117         </span><span class="jsdoc-comment">//Roo.log('add add pane handler');
 118         </span><span class="jsdoc-var">this.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'addpane'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onAddPane</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 119     },
 120      </span><span class="jsdoc-comment">/**
 121      * Updates the box title
 122      * @param {String} html to set the title to.
 123      */
 124     </span><span class="jsdoc-var">setTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">)
 125     {
 126         </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-tabs .header'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">;
 127     },
 128     </span><span class="jsdoc-var">onAddPane </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pane</span><span class="jsdoc-syntax">)
 129     {
 130         </span><span class="jsdoc-var">this.panes.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pane</span><span class="jsdoc-syntax">);
 131         </span><span class="jsdoc-comment">//Roo.log('addpane');
 132         //Roo.log(pane);
 133         // tabs are rendere left to right..
 134         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.showtabs</span><span class="jsdoc-syntax">){
 135             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 136         }
 137
 138         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-tabs'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
 139
 140
 141         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">existing </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ctr.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-tab'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 142         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">qty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">existing.getCount</span><span class="jsdoc-syntax">();;
 143
 144
 145         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ctr.createChild</span><span class="jsdoc-syntax">({
 146             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'li'</span><span class="jsdoc-syntax">,
 147             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'nav-tab' </span><span class="jsdoc-syntax">+ (</span><span class="jsdoc-var">qty </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' active'</span><span class="jsdoc-syntax">),
 148             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
 149                 {
 150                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'a'</span><span class="jsdoc-syntax">,
 151                     </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'#'</span><span class="jsdoc-syntax">,
 152                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pane.title
 153                 </span><span class="jsdoc-syntax">}
 154             ]
 155         }, </span><span class="jsdoc-var">qty </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">existing.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">ctr.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.header'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom </span><span class="jsdoc-syntax">);
 156         </span><span class="jsdoc-var">pane.tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">;
 157
 158         </span><span class="jsdoc-var">tab.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTabClick.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">pane</span><span class="jsdoc-syntax">], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
 159         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">qty</span><span class="jsdoc-syntax">) {
 160             </span><span class="jsdoc-var">pane.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
 161         }
 162
 163
 164     },
 165     </span><span class="jsdoc-var">onTabClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ev</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">un</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">ob</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">pane</span><span class="jsdoc-syntax">)
 166     {
 167         </span><span class="jsdoc-comment">//Roo.log('tab - prev default');
 168         </span><span class="jsdoc-var">ev.preventDefault</span><span class="jsdoc-syntax">();
 169
 170
 171         </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.nav-tabs li.nav-tab'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
 172         </span><span class="jsdoc-var">pane.tab.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
 173         </span><span class="jsdoc-comment">//Roo.log(pane.title);
 174         </span><span class="jsdoc-var">this.getChildContainer</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.tab-pane'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
 175         </span><span class="jsdoc-comment">// technically we should have a deactivate event.. but maybe add later.
 176         // and it should not de-activate the selected tab...
 177         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'activatepane'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pane</span><span class="jsdoc-syntax">);
 178         </span><span class="jsdoc-var">pane.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
 179         </span><span class="jsdoc-var">pane.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'activate'</span><span class="jsdoc-syntax">);
 180
 181
 182     },
 183
 184     </span><span class="jsdoc-var">getActivePane </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 185     {
 186         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 187         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.panes</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">) {
 188             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">p.el.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">)){
 189                 </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
 190                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 191             }
 192
 193             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 194         });
 195
 196         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
 197     }
 198
 199
 200 });
 201
 202
 203 </span></code></body></html>