git.roojs.org Git - roojs1/blob - Roo/bootstrap/Navbar.js

   1 /*
   2  * - LGPL
   3  *
   4  * navbar
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Navbar
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap Navbar class
  12  * @cfg {Boolean} bar is a bar?
  13  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
  14  * @cfg {String} brand what is brand
  15  * @cfg {Boolean} inverse is inverted color
  16  * @cfg {String} type (nav | pills | tabs)
  17  * @cfg {Boolean} arrangement stacked | justified
  18  * @cfg {String} align (left | right) alignment
  19  * @cfg {String} brand_href href of the brand
  20  * @cfg {Boolean} main (true|false) main nav bar? default false
  21  * @cfg {Boolean} loadMask (true|false) loadMask on the bar
  22  * @cfg {String} tag (header|footer|nav|div) default is nav
  23
  24  *
  25  * @constructor
  26  * Create a new Navbar
  27  * @param {Object} config The config object
  28  */
  29
  30
  31 Roo.bootstrap.Navbar = function(config){
  32     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
  33
  34 };
  35
  36 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
  37
  38
  39     bar: false,
  40     brand: '',
  41     inverse: false,
  42     position: '',
  43     align : false,
  44     type: false,
  45     arrangement: '',
  46     brand_href: false,
  47     main : false,
  48     loadMask : false,
  49     tag : false,
  50
  51     // private
  52     navItems : false,
  53
  54     getAutoCreate : function(){
  55
  56
  57
  58         var cfg = {
  59             cls : 'navbar'
  60         };
  61
  62
  63         cfg.cn = [
  64             {
  65                 cls: 'nav',
  66                 tag : 'ul'
  67             }
  68         ];
  69
  70
  71
  72         this.type = this.type || 'nav';
  73         if (['tabs','pills'].indexOf(this.type)!==-1) {
  74             cfg.cn[0].cls += ' nav-' + this.type
  75         } else {
  76             if (this.type!=='nav') {
  77                 Roo.log('nav type must be nav/tabs/pills')
  78             }
  79             cfg.cn[0].cls += ' navbar-nav'
  80         }
  81
  82         if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
  83             cfg.cn[0].cls += ' nav-' + this.arrangement;
  84         }
  85
  86
  87         if (this.align === 'right') {
  88             cfg.cn[0].cls += ' navbar-right';
  89         }
  90
  91         if (this.inverse) {
  92             cfg.cls += ' navbar-inverse';
  93
  94         }
  95
  96
  97         return cfg;
  98     },
  99
 100     initEvents :function ()
 101     {
 102         //Roo.log(this.el.select('.navbar-toggle',true));
 103         this.el.select('.navbar-toggle',true).on('click', function() {
 104            // Roo.log('click');
 105             this.el.select('.navbar-collapse',true).toggleClass('in');
 106         }, this);
 107
 108         var mark = {
 109             tag: "div",
 110             cls:"x-dlg-mask"
 111         }
 112
 113         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
 114
 115         var size = this.el.getSize();
 116         this.maskEl.setSize(size.width, size.height);
 117         this.maskEl.enableDisplayMode("block");
 118         this.maskEl.hide();
 119
 120         if(this.loadMask){
 121             this.maskEl.show();
 122         }
 123     },
 124
 125
 126     getChildContainer : function()
 127     {
 128         if (this.bar === true) {
 129             return this.el.select('.collapse',true).first();
 130         }
 131
 132         return this.el;
 133     },
 134
 135     mask : function()
 136     {
 137         this.maskEl.show();
 138     },
 139
 140     unmask : function()
 141     {
 142         this.maskEl.hide();
 143     }
 144
 145
 146
 147 });
 148
 149
 150
 151
 152
 153