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