+++ /dev/null
-<html><head><title>/home/alan/gitlive/roojs1/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">/*
- * - LGPL
- *
- * TabBox
- *
- */
-</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">|| {};
-
-</span><span class="jsdoc-comment">/**
- * @class Roo.bootstrap.dash.TabBox
- * @extends Roo.bootstrap.Component
- * Bootstrap TabBox class
- * @cfg {String} title Title of the TabBox
- * @cfg {String} icon Icon of the TabBox
- * @cfg {Boolean} showtabs (true|false) show the tabs default true
- * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
- *
- * @constructor
- * Create a new TabBox
- * @param {Object} config The config object
- */
-
-
-</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">){
- </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">);
- </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
- </span><span class="jsdoc-comment">// raw events
- /**
- * @event addpane
- * When a pane is added
- * @param {Roo.bootstrap.dash.TabPane} pane
- */
- </span><span class="jsdoc-string">"addpane" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-comment">/**
- * @event activatepane
- * When a pane is activated
- * @param {Roo.bootstrap.dash.TabPane} pane
- */
- </span><span class="jsdoc-string">"activatepane" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
-
-
- </span><span class="jsdoc-syntax">});
-
- </span><span class="jsdoc-var">this.panes </span><span class="jsdoc-syntax">= [];
-};
-
-</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">, {
-
- </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">icon </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">showtabs </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">tabScrollable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
-
- </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
- {
- </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">();
- },
-
- </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">header </span><span class="jsdoc-syntax">= {
- </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'li'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'pull-left header'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.title</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
- };
-
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.icon</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">header.cn.push</span><span class="jsdoc-syntax">({
- </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">,
- </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
- </span><span class="jsdoc-syntax">});
- }
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= {
- </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
- </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">,
- </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
- </span><span class="jsdoc-var">header
- </span><span class="jsdoc-syntax">]
- };
-
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tabScrollable</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= {
- </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'tab-header'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
- {
- </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">,
- </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">,
- </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
- </span><span class="jsdoc-var">header
- </span><span class="jsdoc-syntax">]
- }
- ]
- };
- }
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
- </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'nav-tabs-custom'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
- </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">,
- {
- </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
- </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">,
- </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
- }
- ]
- };
-
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
- },
- </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
- {
- </span><span class="jsdoc-comment">//Roo.log('add add pane handler');
- </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">);
- },
- </span><span class="jsdoc-comment">/**
- * Updates the box title
- * @param {String} html to set the title to.
- */
- </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">)
- {
- </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">;
- },
- </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">)
- {
- </span><span class="jsdoc-var">this.panes.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pane</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-comment">//Roo.log('addpane');
- //Roo.log(pane);
- // tabs are rendere left to right..
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.showtabs</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
- }
-
- </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">();
-
-
- </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">);
- </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">();;
-
-
- </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">({
- </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'li'</span><span class="jsdoc-syntax">,
- </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">),
- </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
- {
- </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'a'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'#'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pane.title
- </span><span class="jsdoc-syntax">}
- ]
- }, </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">);
- </span><span class="jsdoc-var">pane.tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tab</span><span class="jsdoc-syntax">;
-
- </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">));
- </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">qty</span><span class="jsdoc-syntax">) {
- </span><span class="jsdoc-var">pane.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
- }
-
-
- },
- </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">)
- {
- </span><span class="jsdoc-comment">//Roo.log('tab - prev default');
- </span><span class="jsdoc-var">ev.preventDefault</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 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">);
- </span><span class="jsdoc-var">pane.tab.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-comment">//Roo.log(pane.title);
- </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">);
- </span><span class="jsdoc-comment">// technically we should have a deactivate event.. but maybe add later.
- // and it should not de-activate the selected tab...
- </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">);
- </span><span class="jsdoc-var">pane.el.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'active'</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">pane.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'activate'</span><span class="jsdoc-syntax">);
-
-
- },
-
- </span><span class="jsdoc-var">getActivePane </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
- {
- </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">;
- </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">) {
- </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">)){
- </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">p</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
- }
-
- </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
- });
-
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
- }
-
-
-});
-
-
-</span></code></body></html>
\ No newline at end of file
projects / roojs1 / blobdiff