9 * @class Roo.bootstrap.Navbar
10 * @extends Roo.bootstrap.Component
11 * Bootstrap Navbar class
15 * @param {Object} config The config object
19 Roo.bootstrap.Navbar = function(config){
20 Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
25 * Fire before toggle the menu
26 * @param {Roo.EventObject} e
32 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, {
41 getAutoCreate : function(){
44 throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
48 initEvents :function ()
50 //Roo.log(this.el.select('.navbar-toggle',true));
51 this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
58 this.maskEl = Roo.DomHelper.append(this.el, mark, true);
60 var size = this.el.getSize();
61 this.maskEl.setSize(size.width, size.height);
62 this.maskEl.enableDisplayMode("block");
71 getChildContainer : function()
73 if (this.el && this.el.select('.collapse').getCount()) {
74 return this.el.select('.collapse',true).first();
92 if(this.fireEvent('beforetoggle', this) === false){
95 var ce = this.el.select('.navbar-collapse',true).first();
97 if (!ce.hasClass('show')) {
107 * Expand the navbar pulldown
112 var ce = this.el.select('.navbar-collapse',true).first();
113 if (ce.hasClass('collapsing')) {
116 ce.dom.style.height = '';
118 ce.addClass('in'); // old...
119 ce.removeClass('collapse');
121 var h = ce.getHeight();
123 ce.removeClass('show');
124 // at this point we should be able to see it..
125 ce.addClass('collapsing');
127 ce.setHeight(0); // resize it ...
128 ce.on('transitionend', function() {
129 //Roo.log('done transition');
130 ce.removeClass('collapsing');
132 ce.removeClass('collapse');
134 ce.dom.style.height = '';
135 }, this, { single: true} );
137 ce.dom.scrollTop = 0;
140 * Collapse the navbar pulldown
142 collapse : function()
144 var ce = this.el.select('.navbar-collapse',true).first();
146 if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
147 // it's collapsed or collapsing..
150 ce.removeClass('in'); // old...
151 ce.setHeight(ce.getHeight());
152 ce.removeClass('show');
153 ce.addClass('collapsing');
155 ce.on('transitionend', function() {
156 ce.dom.style.height = '';
157 ce.removeClass('collapsing');
158 ce.addClass('collapse');
159 }, this, { single: true} );