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

   1 <html><head><title>Roo/bootstrap/TabGroup.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  * @class Roo.bootstrap.TabGroup
   3  * @extends Roo.bootstrap.Column
   4  * @children Roo.bootstrap.TabPanel
   5  * Bootstrap Column class
   6  * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
   7  * @cfg {Boolean} carousel true to make the group behave like a carousel
   8  * @cfg {Boolean} bullets show bullets for the panels
   9  * @cfg {Boolean} autoslide (true|false) auto slide .. default false
  10  * @cfg {Number} timer auto slide timer .. default 0 millisecond
  11  * @cfg {Boolean} showarrow (true|false) show arrow default true
  12  *
  13  * @constructor
  14  * Create a new TabGroup
  15  * @param {Object} config The config object
  16  */
  17
  18 </span><span class="jsdoc-var">Roo.bootstrap.TabGroup </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">){
  19     </span><span class="jsdoc-var">Roo.bootstrap.TabGroup.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">);
  20     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.navId</span><span class="jsdoc-syntax">) {
  21         </span><span class="jsdoc-var">this.navId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
  22     }
  23     </span><span class="jsdoc-var">this.tabs </span><span class="jsdoc-syntax">= [];
  24     </span><span class="jsdoc-var">Roo.bootstrap.TabGroup.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  25
  26 };
  27
  28 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.TabGroup</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Column</span><span class="jsdoc-syntax">,  {
  29
  30     </span><span class="jsdoc-var">carousel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  31     </span><span class="jsdoc-var">transition </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  32     </span><span class="jsdoc-var">bullets </span><span class="jsdoc-syntax">: 0,
  33     </span><span class="jsdoc-var">timer </span><span class="jsdoc-syntax">: 0,
  34     </span><span class="jsdoc-var">autoslide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  35     </span><span class="jsdoc-var">slideFn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  36     </span><span class="jsdoc-var">slideOnTouch </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  37     </span><span class="jsdoc-var">showarrow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  38
  39     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  40     {
  41         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">Roo.bootstrap.TabGroup.superclass.getAutoCreate.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">));
  42
  43         </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' tab-content'</span><span class="jsdoc-syntax">;
  44
  45         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.carousel</span><span class="jsdoc-syntax">) {
  46             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' carousel slide'</span><span class="jsdoc-syntax">;
  47
  48             </span><span class="jsdoc-var">cfg.cn </span><span class="jsdoc-syntax">= [{
  49                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-inner'</span><span class="jsdoc-syntax">,
  50                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
  51             }];
  52
  53             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bullets  </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
  54
  55                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bullets </span><span class="jsdoc-syntax">= {
  56                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-bullets'</span><span class="jsdoc-syntax">,
  57                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
  58                 };
  59
  60                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bullets_cls</span><span class="jsdoc-syntax">){
  61                     </span><span class="jsdoc-var">bullets.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">bullets.cls </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.bullets_cls</span><span class="jsdoc-syntax">;
  62                 }
  63
  64                 </span><span class="jsdoc-var">bullets.cn.push</span><span class="jsdoc-syntax">({
  65                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'clear'
  66                 </span><span class="jsdoc-syntax">});
  67
  68                 </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bullets</span><span class="jsdoc-syntax">);
  69             }
  70
  71             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.showarrow</span><span class="jsdoc-syntax">){
  72                 </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn.push</span><span class="jsdoc-syntax">({
  73                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  74                     </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-arrow'</span><span class="jsdoc-syntax">,
  75                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  76                         {
  77                             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  78                             </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-prev'</span><span class="jsdoc-syntax">,
  79                             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  80                                 {
  81                                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
  82                                     </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fa fa-chevron-left'
  83                                 </span><span class="jsdoc-syntax">}
  84                             ]
  85                         },
  86                         {
  87                             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  88                             </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'carousel-next'</span><span class="jsdoc-syntax">,
  89                             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  90                                 {
  91                                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
  92                                     </span><span class="jsdoc-var">class </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fa fa-chevron-right'
  93                                 </span><span class="jsdoc-syntax">}
  94                             ]
  95                         }
  96                     ]
  97                 });
  98             }
  99
 100         }
 101
 102         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 103     },
 104
 105     </span><span class="jsdoc-var">initEvents</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 106     {
 107 </span><span class="jsdoc-comment">//        if(Roo.isTouch &amp;&amp; this.slideOnTouch &amp;&amp; !this.showarrow){
 108 //            this.el.on(&quot;touchstart&quot;, this.onTouchStart, this);
 109 //        }
 110
 111         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">){
 112             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 113
 114             </span><span class="jsdoc-var">this.slideFn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.setInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 115                 </span><span class="jsdoc-var">_this.showPanelNext</span><span class="jsdoc-syntax">();
 116             }, </span><span class="jsdoc-var">this.timer</span><span class="jsdoc-syntax">);
 117         }
 118
 119         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.showarrow</span><span class="jsdoc-syntax">){
 120             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.carousel-prev'</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">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.showPanelPrev</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 121             </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.carousel-next'</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">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.showPanelNext</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 122         }
 123
 124
 125     },
 126
 127 </span><span class="jsdoc-comment">//    onTouchStart : function(e, el, o)
 128 //    {
 129 //        if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
 130 //            return;
 131 //        }
 132 //
 133 //        this.showPanelNext();
 134 //    },
 135
 136
 137     </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 138     {
 139         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.carousel </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.carousel-inner'</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">this.el</span><span class="jsdoc-syntax">;
 140     },
 141
 142     </span><span class="jsdoc-comment">/**
 143     * register a Navigation item
 144     * @param {Roo.bootstrap.nav.Item} the navitem to add
 145     */
 146     </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">)
 147     {
 148         </span><span class="jsdoc-var">this.tabs.push</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">item</span><span class="jsdoc-syntax">);
 149         </span><span class="jsdoc-var">item.navId </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.navId</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// not really needed..
 150         </span><span class="jsdoc-var">this.addBullet</span><span class="jsdoc-syntax">();
 151
 152     },
 153
 154     </span><span class="jsdoc-var">getActivePanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 155     {
 156         </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">;
 157         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) {
 158             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.active</span><span class="jsdoc-syntax">) {
 159                 </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
 160                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 161             }
 162             </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 163         });
 164         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
 165
 166     },
 167     </span><span class="jsdoc-var">getPanelByName </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">)
 168     {
 169         </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">;
 170         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">) {
 171             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.tabId </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">) {
 172                 </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">;
 173                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 174             }
 175             </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 176         });
 177         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
 178     },
 179     </span><span class="jsdoc-var">indexOfPanel </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">)
 180     {
 181         </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">;
 182         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
 183             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.tabId </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">p.tabId</span><span class="jsdoc-syntax">) {
 184                 </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">;
 185                 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 186             }
 187             </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
 188         });
 189         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
 190     },
 191     </span><span class="jsdoc-comment">/**
 192      * show a specific panel
 193      * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
 194      * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
 195      */
 196     </span><span class="jsdoc-var">showPanel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">)
 197     {
 198         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.transition </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">){
 199             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;waiting for the transitionend&quot;</span><span class="jsdoc-syntax">);
 200             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 201         }
 202
 203         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'number'</span><span class="jsdoc-syntax">) {
 204             </span><span class="jsdoc-var">pan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">];
 205         }
 206
 207         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">) {
 208             </span><span class="jsdoc-var">pan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getPanelByName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">);
 209         }
 210
 211         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cur </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getActivePanel</span><span class="jsdoc-syntax">();
 212
 213         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">pan </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">cur</span><span class="jsdoc-syntax">){
 214             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'pan or acitve pan is undefined'</span><span class="jsdoc-syntax">);
 215             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 216         }
 217
 218         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan.tabId </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.getActivePanel</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.tabId</span><span class="jsdoc-syntax">) {
 219             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 220         }
 221
 222         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">cur.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforedeactivate'</span><span class="jsdoc-syntax">)) {
 223             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 224         }
 225
 226         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.bullets </span><span class="jsdoc-syntax">&gt; 0 &amp;&amp; !</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
 227             </span><span class="jsdoc-var">this.setActiveBullet</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">));
 228         }
 229
 230         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.carousel </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.dom.style.transition</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 231
 232             </span><span class="jsdoc-comment">//class=&quot;carousel-item carousel-item-next carousel-item-left&quot;
 233
 234             </span><span class="jsdoc-var">this.transition </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 235             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">dir </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pan</span><span class="jsdoc-syntax">) &gt; </span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cur</span><span class="jsdoc-syntax">)  ? </span><span class="jsdoc-string">'next' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'prev'</span><span class="jsdoc-syntax">;
 236             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dir </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'next' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'left' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">;
 237             </span><span class="jsdoc-var">pan.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dir</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// or prev
 238             </span><span class="jsdoc-var">pan.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'carousel-item-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dir</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// or prev
 239             </span><span class="jsdoc-var">pan.el.dom.offsetWidth</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// find the offset with - causing a reflow?
 240             </span><span class="jsdoc-var">cur.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// or right
 241             </span><span class="jsdoc-var">pan.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">);
 242             </span><span class="jsdoc-var">cur.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'carousel-item-' </span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// or right
 243             </span><span class="jsdoc-var">pan.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'carousel-item-' </span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">);
 244
 245
 246             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 247             </span><span class="jsdoc-var">cur.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'transitionend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 248                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;trans end?&quot;</span><span class="jsdoc-syntax">);
 249
 250                 </span><span class="jsdoc-var">pan.el.removeClass</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">dir</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'carousel-item-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'carousel-item-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">dir</span><span class="jsdoc-syntax">]);
 251                 </span><span class="jsdoc-var">pan.setActive</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 252
 253                 </span><span class="jsdoc-var">cur.el.removeClass</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'carousel-item-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">lr</span><span class="jsdoc-syntax">]);
 254                 </span><span class="jsdoc-var">cur.setActive</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 255
 256                 </span><span class="jsdoc-var">_this.transition </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 257
 258             }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, { </span><span class="jsdoc-var">single</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">} );
 259
 260             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 261         }
 262
 263         </span><span class="jsdoc-var">cur.setActive</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 264         </span><span class="jsdoc-var">pan.setActive</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 265
 266         </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
 267
 268     },
 269     </span><span class="jsdoc-var">showPanelNext </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 270     {
 271         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getActivePanel</span><span class="jsdoc-syntax">());
 272
 273         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&gt;= </span><span class="jsdoc-var">this.tabs.length </span><span class="jsdoc-syntax">- 1 &amp;&amp; !</span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">) {
 274             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 275         }
 276
 277         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&gt;= </span><span class="jsdoc-var">this.tabs.length </span><span class="jsdoc-syntax">- 1 &amp;&amp; </span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">) {
 278             </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= -1;
 279         }
 280
 281         </span><span class="jsdoc-var">this.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">+1]);
 282     },
 283
 284     </span><span class="jsdoc-var">showPanelPrev </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 285     {
 286         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.indexOfPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getActivePanel</span><span class="jsdoc-syntax">());
 287
 288         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i  </span><span class="jsdoc-syntax">&lt; 1 &amp;&amp; !</span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">) {
 289             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 290         }
 291
 292         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; 1 &amp;&amp; </span><span class="jsdoc-var">this.autoslide</span><span class="jsdoc-syntax">) {
 293             </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tabs.length</span><span class="jsdoc-syntax">;
 294         }
 295
 296         </span><span class="jsdoc-var">this.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabs</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">-1]);
 297     },
 298
 299
 300     </span><span class="jsdoc-var">addBullet</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 301     {
 302         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.bullets </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
 303             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 304         }
 305         </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">'.carousel-bullets'</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">();
 306         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.carousel-bullets .bullet'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getCount</span><span class="jsdoc-syntax">() ;
 307         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bullet </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ctr.createChild</span><span class="jsdoc-syntax">({
 308             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'bullet bullet-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i
 309         </span><span class="jsdoc-syntax">},</span><span class="jsdoc-var">ctr.dom.lastChild</span><span class="jsdoc-syntax">);
 310
 311
 312         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 313
 314         </span><span class="jsdoc-var">bullet.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ii</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
 315
 316             </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
 317
 318             </span><span class="jsdoc-var">this.showPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ii</span><span class="jsdoc-syntax">);
 319
 320             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autoslide </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.slideFn</span><span class="jsdoc-syntax">){
 321                 </span><span class="jsdoc-var">clearInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.slideFn</span><span class="jsdoc-syntax">);
 322                 </span><span class="jsdoc-var">this.slideFn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.setInterval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 323                     </span><span class="jsdoc-var">_this.showPanelNext</span><span class="jsdoc-syntax">();
 324                 }, </span><span class="jsdoc-var">this.timer</span><span class="jsdoc-syntax">);
 325             }
 326
 327         })</span><span class="jsdoc-var">.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">bullet</span><span class="jsdoc-syntax">], </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">));
 328
 329
 330     },
 331
 332     </span><span class="jsdoc-var">setActiveBullet </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">)
 333     {
 334         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">){
 335             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 336         }
 337
 338         </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.bullet'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.elements</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
 339             </span><span class="jsdoc-var">el.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'selected'</span><span class="jsdoc-syntax">);
 340         });
 341
 342         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bullet </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.bullet-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i</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">();
 343
 344         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">bullet</span><span class="jsdoc-syntax">){
 345             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 346         }
 347
 348         </span><span class="jsdoc-var">bullet.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'selected'</span><span class="jsdoc-syntax">);
 349     }
 350
 351
 352
 353 });
 354
 355
 356
 357
 358
 359 </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.TabGroup</span><span class="jsdoc-syntax">, {
 360
 361     </span><span class="jsdoc-var">groups</span><span class="jsdoc-syntax">: {},
 362      </span><span class="jsdoc-comment">/**
 363     * register a Navigation Group
 364     * @param {Roo.bootstrap.nav.Group} the navgroup to add
 365     */
 366     </span><span class="jsdoc-var">register </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">navgrp</span><span class="jsdoc-syntax">)
 367     {
 368         </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">navgrp.navId</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">navgrp</span><span class="jsdoc-syntax">;
 369
 370     },
 371     </span><span class="jsdoc-comment">/**
 372     * fetch a Navigation Group based on the navigation ID
 373     * if one does not exist , it will get created.
 374     * @param {string} the navgroup to add
 375     * @returns {Roo.bootstrap.nav.Group} the navgroup
 376     */
 377     </span><span class="jsdoc-var">get</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">navId</span><span class="jsdoc-syntax">) {
 378         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">navId</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 379             </span><span class="jsdoc-var">this.register</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.bootstrap.TabGroup</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">navId </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">navId </span><span class="jsdoc-syntax">}));
 380         }
 381         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">navId</span><span class="jsdoc-syntax">] ;
 382     }
 383
 384
 385
 386 });
 387
 388  </span></code></body></html>