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 {String} position (fixed-top|fixed-bottom|static-top) position
  13  * @cfg {String} brand what is brand
  14  * @cfg {Boolean} inverse is inverted color
  15  * @cfg {String} type (nav | pills | tabs)
  16  * @cfg {Boolean} arrangement stacked | justified
  17  * @cfg {String} align (left | right) alignment
  18  * @cfg {String} brand_href href of the brand
  19  * @cfg {Boolean} main (true|false) main nav bar? default false
  20  * @cfg {Boolean} loadMask (true|false) loadMask on the bar
  21  * @cfg {String} tag (header|footer|nav|div) default is nav
  22
  23  *
  24  * @constructor
  25  * Create a new Navbar
  26  * @param {Object} config The config object
  27  */
  28
  29
  30 Roo.bootstrap.Navbar = function(config){
  31     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
  32
  33 };
  34
  35 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
  36
  37
  38     bar: false,
  39     brand: '',
  40     inverse: false,
  41     position: '',
  42     align : false,
  43     type: false,
  44     arrangement: '',
  45     brand_href: false,
  46     main : false,
  47     loadMask : false,
  48     tag : false,
  49
  50     // private
  51     navItems : false,
  52
  53     getAutoCreate : function(){
  54
  55
  56         throw { message : "nav bar is now a abstract base class - use SimpleBar / HeaderBar / SideBar etc..."};
  57
  58     },
  59
  60     initEvents :function ()
  61     {
  62         //Roo.log(this.el.select('.navbar-toggle',true));
  63         this.el.select('.navbar-toggle',true).on('click', function() {
  64            // Roo.log('click');
  65             this.el.select('.navbar-collapse',true).toggleClass('in');
  66         }, this);
  67
  68         var mark = {
  69             tag: "div",
  70             cls:"x-dlg-mask"
  71         }
  72
  73         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
  74
  75         var size = this.el.getSize();
  76         this.maskEl.setSize(size.width, size.height);
  77         this.maskEl.enableDisplayMode("block");
  78         this.maskEl.hide();
  79
  80         if(this.loadMask){
  81             this.maskEl.show();
  82         }
  83     },
  84
  85
  86     getChildContainer : function()
  87     {
  88         if (this.bar === true) {
  89             return this.el.select('.collapse',true).first();
  90         }
  91
  92         return this.el;
  93     },
  94
  95     mask : function()
  96     {
  97         this.maskEl.show();
  98     },
  99
 100     unmask : function()
 101     {
 102         this.maskEl.hide();
 103     }
 104
 105
 106
 107 });
 108
 109
 110
 111
 112
 113