git.roojs.org Git - roojs1/blob - docs.old/symbols/src/Roo_bootstrap_NavHeaderbar.js.html

   1 <html><head><title>../roojs1/Roo/bootstrap/NavHeaderbar.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  * navbar
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.NavHeaderbar
  10  * @extends Roo.bootstrap.NavSimplebar
  11  * Bootstrap Sidebar class
  12  *
  13  * @cfg {String} brand what is brand
  14  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
  15  * @cfg {String} brand_href href of the brand
  16  * @cfg {Boolean} srButton generate the (screen reader / mobile) sr-only button   default true
  17  * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
  18  * @cfg {Boolean} desktopCenter should the header be centered on desktop using a container class
  19  * @cfg {Roo.bootstrap.Row} mobilerow - a row to display on mobile only..
  20  *
  21  * @constructor
  22  * Create a new Sidebar
  23  * @param {Object} config The config object
  24  */
  25
  26
  27 </span><span class="jsdoc-var">Roo.bootstrap.NavHeaderbar </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">){
  28     </span><span class="jsdoc-var">Roo.bootstrap.NavHeaderbar.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">);
  29
  30 };
  31
  32 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.NavHeaderbar</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.NavSimplebar</span><span class="jsdoc-syntax">,  {
  33
  34     </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  35     </span><span class="jsdoc-var">brand</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  36     </span><span class="jsdoc-var">brand_href</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  37     </span><span class="jsdoc-var">srButton </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  38     </span><span class="jsdoc-var">autohide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  39     </span><span class="jsdoc-var">desktopCenter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  40
  41
  42     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  43
  44         </span><span class="jsdoc-keyword">var   </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  45             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.nav </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'nav'</span><span class="jsdoc-syntax">,
  46             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar'</span><span class="jsdoc-syntax">,
  47             </span><span class="jsdoc-var">role</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navigation'</span><span class="jsdoc-syntax">,
  48             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
  49         };
  50
  51         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">;
  52         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.desktopCenter</span><span class="jsdoc-syntax">) {
  53             </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'container'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []});
  54             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn</span><span class="jsdoc-syntax">;
  55         }
  56
  57         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.srButton</span><span class="jsdoc-syntax">){
  58             </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({
  59                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  60                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar-header'</span><span class="jsdoc-syntax">,
  61                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
  62                     {
  63                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
  64                         </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
  65                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar-toggle'</span><span class="jsdoc-syntax">,
  66                         </span><span class="jsdoc-string">'data-toggle'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">,
  67                         </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
  68                             {
  69                                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  70                                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'sr-only'</span><span class="jsdoc-syntax">,
  71                                 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Toggle navigation'
  72                             </span><span class="jsdoc-syntax">},
  73                             {
  74                                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  75                                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-bar'
  76                             </span><span class="jsdoc-syntax">},
  77                             {
  78                                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  79                                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-bar'
  80                             </span><span class="jsdoc-syntax">},
  81                             {
  82                                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  83                                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-bar'
  84                             </span><span class="jsdoc-syntax">}
  85                         ]
  86                     }
  87                 ]
  88             });
  89         }
  90
  91         </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({
  92             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  93             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'collapse navbar-collapse'</span><span class="jsdoc-syntax">,
  94             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
  95         });
  96
  97         </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.inverse </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">' navbar-inverse' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' navbar-default'</span><span class="jsdoc-syntax">;
  98
  99         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">'fixed-top'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'fixed-bottom'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'static-top'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">)&gt;-1) {
 100             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' navbar-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">;
 101
 102             </span><span class="jsdoc-comment">// tag can override this..
 103
 104             </span><span class="jsdoc-var">cfg.tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tag </span><span class="jsdoc-syntax">|| (</span><span class="jsdoc-var">this.position  </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'fixed-bottom' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'footer' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'header'</span><span class="jsdoc-syntax">);
 105         }
 106
 107         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.brand </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) {
 108             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn.push</span><span class="jsdoc-syntax">({
 109                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'a'</span><span class="jsdoc-syntax">,
 110                 </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.brand_href </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.brand_href </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'#'</span><span class="jsdoc-syntax">,
 111                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar-brand'</span><span class="jsdoc-syntax">,
 112                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 113                 </span><span class="jsdoc-var">this.brand
 114                 </span><span class="jsdoc-syntax">]
 115             });
 116         }
 117
 118         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.main</span><span class="jsdoc-syntax">){
 119             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' main-nav'</span><span class="jsdoc-syntax">;
 120         }
 121
 122
 123         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 124
 125
 126     },
 127     </span><span class="jsdoc-var">getHeaderChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 128     {
 129         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.srButton </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.navbar-header'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getCount</span><span class="jsdoc-syntax">()) {
 130             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.navbar-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">();
 131         }
 132
 133         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getChildContainer</span><span class="jsdoc-syntax">();
 134     },
 135
 136
 137     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 138     {
 139         </span><span class="jsdoc-var">Roo.bootstrap.NavHeaderbar.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 140
 141         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autohide</span><span class="jsdoc-syntax">) {
 142
 143             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">prevScroll </span><span class="jsdoc-syntax">= 0;
 144             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
 145
 146             </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'scroll'</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">) {
 147                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getScroll</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.top</span><span class="jsdoc-syntax">;
 148                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">os </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">prevScroll</span><span class="jsdoc-syntax">;
 149                 </span><span class="jsdoc-var">prevScroll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">;
 150
 151                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">os</span><span class="jsdoc-syntax">){
 152                     </span><span class="jsdoc-var">ft.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideDown'</span><span class="jsdoc-syntax">);
 153                     </span><span class="jsdoc-var">ft.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideUp'</span><span class="jsdoc-syntax">);
 154                     </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 155                 }
 156                 </span><span class="jsdoc-var">ft.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideUp'</span><span class="jsdoc-syntax">);
 157                 </span><span class="jsdoc-var">ft.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideDown'</span><span class="jsdoc-syntax">);
 158
 159
 160           },</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 161         }
 162     }
 163
 164 });
 165
 166
 167
 168
 169
 170  </span></code></body></html>