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

   1 /*
   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 sr-only button (true | false) default true
  17  * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
  18  *
  19  * @constructor
  20  * Create a new Sidebar
  21  * @param {Object} config The config object
  22  */
  23
  24
  25 Roo.bootstrap.NavHeaderbar = function(config){
  26     Roo.bootstrap.NavHeaderbar.superclass.constructor.call(this, config);
  27 };
  28
  29 Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
  30
  31     position: '',
  32     brand: '',
  33     brand_href: false,
  34     srButton : true,
  35     autohide : false,
  36
  37     getAutoCreate : function(){
  38
  39         var   cfg = {
  40             tag: this.nav || 'nav',
  41             cls: 'navbar',
  42             role: 'navigation',
  43             cn: []
  44         };
  45
  46         if(this.srButton){
  47             cfg.cn.push({
  48                 tag: 'div',
  49                 cls: 'navbar-header',
  50                 cn: [
  51                     {
  52                         tag: 'button',
  53                         type: 'button',
  54                         cls: 'navbar-toggle',
  55                         'data-toggle': 'collapse',
  56                         cn: [
  57                             {
  58                                 tag: 'span',
  59                                 cls: 'sr-only',
  60                                 html: 'Toggle navigation'
  61                             },
  62                             {
  63                                 tag: 'span',
  64                                 cls: 'icon-bar'
  65                             },
  66                             {
  67                                 tag: 'span',
  68                                 cls: 'icon-bar'
  69                             },
  70                             {
  71                                 tag: 'span',
  72                                 cls: 'icon-bar'
  73                             }
  74                         ]
  75                     }
  76                 ]
  77             });
  78         }
  79
  80         cfg.cn.push({
  81             tag: 'div',
  82             cls: 'collapse navbar-collapse',
  83             cn : []
  84         });
  85
  86         cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
  87
  88         if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
  89             cfg.cls += ' navbar-' + this.position;
  90
  91             // tag can override this..
  92
  93             cfg.tag = this.tag || (this.position  == 'fixed-bottom' ? 'footer' : 'header');
  94         }
  95
  96         if (this.brand !== '') {
  97             cfg.cn[0].cn.push({
  98                 tag: 'a',
  99                 href: this.brand_href ? this.brand_href : '#',
 100                 cls: 'navbar-brand',
 101                 cn: [
 102                 this.brand
 103                 ]
 104             });
 105         }
 106
 107         if(this.main){
 108             cfg.cls += ' main-nav';
 109         }
 110
 111
 112         return cfg;
 113
 114
 115     },
 116     initEvents : function()
 117     {
 118         Roo.bootstrap.NavHeaderbar.superclass.initEvents.call(this);
 119
 120         if (this.autohide) {
 121
 122             var prevScroll = 0;
 123             var ft = this.el;
 124
 125             Roo.get(document).on('scroll',function(e) {
 126                 var ns = Roo.get(document).getScroll().top;
 127                 var os = prevScroll;
 128                 prevScroll = ns;
 129
 130                 if(ns > os){
 131                     ft.removeClass('slideDown');
 132                     ft.addClass('slideUp');
 133                     return;
 134                 }
 135                 ft.removeClass('slideUp').
 136                 ft.addClass('slideDown');
 137
 138
 139           },this);
 140         }
 141     }
 142
 143
 144
 145
 146 });
 147
 148
 149
 150
 151
 152