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} 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  *
  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 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
  35
  36     sidebar: false,
  37
  38     bar: false,
  39     brand: '',
  40     inverse: false,
  41     position: '',
  42     align : false,
  43     type: 'nav',
  44     arrangement: '',
  45     brand_href: false,
  46     main : false,
  47     disable : false,
  48
  49     getAutoCreate : function(){
  50         var cfg = {
  51             cls : 'navbar'
  52         };
  53
  54         if (this.sidebar === true) {
  55             cfg = {
  56                 tag: 'div',
  57                 cls: 'sidebar-nav'
  58             };
  59             return cfg;
  60         }
  61
  62         if (this.bar === true) {
  63             cfg = {
  64                 tag: 'nav',
  65                 cls: 'navbar',
  66                 role: 'navigation',
  67                 cn: [
  68                     {
  69                         tag: 'div',
  70                         cls: 'navbar-header',
  71                         cn: [
  72                             {
  73                             tag: 'button',
  74                             type: 'button',
  75                             cls: 'navbar-toggle',
  76                             'data-toggle': 'collapse',
  77                             cn: [
  78                                 {
  79                                     tag: 'span',
  80                                     cls: 'sr-only',
  81                                     html: 'Toggle navigation'
  82                                 },
  83                                 {
  84                                     tag: 'span',
  85                                     cls: 'icon-bar'
  86                                 },
  87                                 {
  88                                     tag: 'span',
  89                                     cls: 'icon-bar'
  90                                 },
  91                                 {
  92                                     tag: 'span',
  93                                     cls: 'icon-bar'
  94                                 }
  95                             ]
  96                             }
  97                         ]
  98                     },
  99                     {
 100                     tag: 'div',
 101                     cls: 'collapse navbar-collapse'
 102                     }
 103                 ]
 104             };
 105
 106             cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
 107
 108             if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
 109                 cfg.cls += ' navbar-' + this.position;
 110                 cfg.tag = this.position  == 'fixed-bottom' ? 'footer' : 'header';
 111             }
 112
 113             if (this.brand !== '') {
 114                 cfg.cn[0].cn.push({
 115                     tag: 'a',
 116                     href: this.brand_href ? this.brand_href : '#',
 117                     cls: 'navbar-brand',
 118                     cn: [
 119                     this.brand
 120                     ]
 121                 });
 122             }
 123
 124             if(this.main){
 125                 cfg.cls += ' main-nav';
 126             }
 127
 128
 129             return cfg;
 130
 131         } else if (this.bar === false) {
 132
 133         } else {
 134             Roo.log('Property \'bar\' in of Navbar must be either true or false')
 135         }
 136
 137         cfg.cn = [
 138             {
 139                 cls: 'nav',
 140                 tag : 'ul'
 141             }
 142         ];
 143
 144         if (['tabs','pills'].indexOf(this.type)!==-1) {
 145             cfg.cn[0].cls += ' nav-' + this.type
 146         } else {
 147             if (this.type!=='nav') {
 148             Roo.log('nav type must be nav/tabs/pills')
 149             }
 150             cfg.cn[0].cls += ' navbar-nav'
 151         }
 152
 153         if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
 154             cfg.cn[0].cls += ' nav-' + this.arrangement;
 155         }
 156
 157         if (this.align === 'right') {
 158             cfg.cn[0].cls += ' navbar-right';
 159         }
 160         if (this.inverse) {
 161             cfg.cls += ' navbar-inverse';
 162
 163         }
 164
 165
 166         return cfg;
 167     },
 168
 169     initEvents :function ()
 170     {
 171         //Roo.log(this.el.select('.navbar-toggle',true));
 172         this.el.select('.navbar-toggle',true).on('click', function() {
 173            // Roo.log('click');
 174             this.el.select('.navbar-collapse',true).toggleClass('in');
 175         }, this);
 176
 177     },
 178
 179
 180     getChildContainer : function()
 181     {
 182         if (this.bar === true) {
 183             return this.el.select('.collapse',true).first();
 184         }
 185
 186         return this.el;
 187     }
 188
 189 });
 190
 191
 192
 193