* @class Roo.bootstrap.Navbar
* @extends Roo.bootstrap.Component
* Bootstrap Navbar class
- * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
- * @cfg {String} brand what is brand
- * @cfg {Boolean} inverse is inverted color
- * @cfg {String} type (nav | pills | tabs)
- * @cfg {Boolean} arrangement stacked | justified
- * @cfg {String} align (left | right) alignment
- * @cfg {String} brand_href href of the brand
- * @cfg {Boolean} main (true|false) main nav bar? default false
- * @cfg {Boolean} loadMask (true|false) loadMask on the bar
- * @cfg {String} tag (header|footer|nav|div) default is nav
- *
* @constructor
* Create a new Navbar
* @param {Object} config The config object
Roo.bootstrap.Navbar = function(config){
Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
-
+ this.addEvents({
+ // raw events
+ /**
+ * @event beforetoggle
+ * Fire before toggle the menu
+ * @param {Roo.EventObject} e
+ */
+ "beforetoggle" : true
+ });
};
Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, {
- brand: '',
- inverse: false,
- position: '',
- align : false,
- type: false,
- arrangement: '',
- brand_href: false,
- main : false,
- loadMask : false,
- tag : false,
-
+
// private
navItems : false,
+ loadMask : false,
+
getAutoCreate : function(){
- throw { message : "nav bar is now a abstract base class - use SimpleBar / HeaderBar / SideBar etc..."};
+ throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
},
{
//Roo.log(this.el.select('.navbar-toggle',true));
this.el.select('.navbar-toggle',true).on('click', function() {
- // Roo.log('click');
- this.el.select('.navbar-collapse',true).toggleClass('in');
+ if(this.fireEvent('beforetoggle', this) !== false){
+ var ce = this.el.select('.navbar-collapse',true).first();
+ ce.toggleClass('in'); // old...
+ if (ce.hasClass('collapse')) {
+ // show it...
+ ce.removeClass('collapse');
+ ce.addClass('show');
+ var h = ce.getHeight();
+ Roo.log(h);
+ ce.removeClass('show');
+ // at this point we should be able to see it..
+ ce.addClass('collapsing');
+
+ ce.setHeight(0); // resize it ...
+ ce.on('transitionend', function() {
+ Roo.log('done transition');
+ ce.removeClass('collapsing');
+ ce.addClass('show');
+ ce.removeClass('collapse');
+
+ ce.dom.style.height = '';
+ }, this, { single: true} );
+ ce.setHeight(h);
+
+ } else {
+ ce.setHeight(ce.getHeight());
+ ce.removeClass('show');
+ ce.addClass('collapsing');
+
+ ce.on('transitionend', function() {
+ ce.dom.style.height = '';
+ ce.removeClass('collapsing');
+ ce.addClass('collapse');
+ }, this, { single: true} );
+ ce.setHeight(0);
+ }
+ }
+
}, this);
var mark = {
tag: "div",
cls:"x-dlg-mask"
- }
+ };
this.maskEl = Roo.DomHelper.append(this.el, mark, true);
getChildContainer : function()
{
- if (this.el.select('.collapse').getCount()) {
+ if (this.el && this.el.select('.collapse').getCount()) {
return this.el.select('.collapse',true).first();
}
unmask : function()
{
this.maskEl.hide();
- }
+ }
+