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

   1 /*
   2  * - LGPL
   3  *
   4  * menu
   5  *
   6  */
   7 Roo.bootstrap.menu = Roo.bootstrap.menu || {};
   8
   9 /**
  10  * @class Roo.bootstrap.menu.Menu
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap Menu class - container for MenuItems
  13  * @cfg {Boolean} submenu (true | false) default false
  14  * @cfg {String} html Text of the menu
  15  * @cfg {String} weight (default | primary | success | info | warning | danger | inverse)
  16  *
  17  * @constructor
  18  * Create a new Menu
  19  * @param {Object} config The config object
  20  */
  21
  22
  23 Roo.bootstrap.menu.Menu = function(config){
  24     Roo.bootstrap.menu.Menu.superclass.constructor.call(this, config);
  25
  26 //    this.addEvents({
  27 //        /**
  28 //         * @event beforeshow
  29 //         * Fires before this menu is displayed
  30 //         * @param {Roo.menu.Menu} this
  31 //         */
  32 //        beforeshow : true,
  33 //        /**
  34 //         * @event beforehide
  35 //         * Fires before this menu is hidden
  36 //         * @param {Roo.menu.Menu} this
  37 //         */
  38 //        beforehide : true,
  39 //        /**
  40 //         * @event show
  41 //         * Fires after this menu is displayed
  42 //         * @param {Roo.menu.Menu} this
  43 //         */
  44 //        show : true,
  45 //        /**
  46 //         * @event hide
  47 //         * Fires after this menu is hidden
  48 //         * @param {Roo.menu.Menu} this
  49 //         */
  50 //        hide : true,
  51 //        /**
  52 //         * @event click
  53 //         * Fires when this menu is clicked (or when the enter key is pressed while it is active)
  54 //         * @param {Roo.menu.Menu} this
  55 //         * @param {Roo.menu.Item} menuItem The menu item that was clicked
  56 //         * @param {Roo.EventObject} e
  57 //         */
  58 //        click : true,
  59 //        /**
  60 //         * @event mouseover
  61 //         * Fires when the mouse is hovering over this menu
  62 //         * @param {Roo.menu.Menu} this
  63 //         * @param {Roo.EventObject} e
  64 //         * @param {Roo.menu.Item} menuItem The menu item that was clicked
  65 //         */
  66 //        mouseover : true,
  67 //        /**
  68 //         * @event mouseout
  69 //         * Fires when the mouse exits this menu
  70 //         * @param {Roo.menu.Menu} this
  71 //         * @param {Roo.EventObject} e
  72 //         * @param {Roo.menu.Item} menuItem The menu item that was clicked
  73 //         */
  74 //        mouseout : true,
  75 //        /**
  76 //         * @event itemclick
  77 //         * Fires when a menu item contained in this menu is clicked
  78 //         * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
  79 //         * @param {Roo.EventObject} e
  80 //         */
  81 //        itemclick: true
  82 //    });
  83
  84 };
  85
  86 Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component,  {
  87
  88     submenu : false,
  89     html : '',
  90     weight : 'default',
  91
  92
  93     getChildContainer : function() {
  94         return this.el.select('ul.dropdown-menu', true).first();
  95     },
  96
  97     getAutoCreate : function()
  98     {
  99         var cfg = {
 100             tag : 'div',
 101             cls : 'btn-group',
 102             cn : [
 103                 {
 104                     tag : 'button',
 105                     cls : 'btn btn-' + this.weight,
 106                     html : this.html
 107                 },
 108                 {
 109                     tag : 'button',
 110                     cls : 'dropdown-toggle btn btn-' + this.weight,
 111                     cn : [
 112                         {
 113                             tag : 'span',
 114                             cls : 'caret'
 115                         }
 116                     ]
 117                 },
 118                 {
 119                     tag : 'ul',
 120                     cls : 'dropdown-menu'
 121                 }
 122             ]
 123
 124         };
 125
 126         return cfg;
 127     },
 128
 129     initEvents : function() {
 130         this.hidden = true;
 131         this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
 132         this.triggerEl.on('click', this.onTriggerPress, this);
 133
 134     },
 135
 136     onTriggerPress  : function(e)
 137     {
 138         Roo.log('trigger press');
 139
 140         if (this.isVisible()) {
 141             this.hide();
 142         } else {
 143             this.show();
 144         }
 145
 146
 147     },
 148
 149     isVisible : function(){
 150         return !this.hidden;
 151     },
 152
 153     show : function()
 154     {
 155         this.hidden = false;
 156         this.el.addClass('open');
 157
 158     },
 159
 160     hide : function()
 161     {
 162         this.hidden = true;
 163         this.el.removeClass('open');;
 164     }
 165
 166 });
 167
 168
 169