Simple menu plugin for RightJS
var Menu = new Class(Element, {
include: Options,
Options: {
choices: [],
name: ''
},
initialize: function(options) {
var scope = this;
this.setOptions(options);
this.$super('div');
this.text(this.options.name);
this._width = 200;
// shortcut for easy access to menu elements
this._menuElements = {};
this._menu = $E('div', {
style: {
backgroundColor: 'white',
border: '2px outset white',
verticalAlign: 'top',
textAlign: 'left',
zIndex: 1002
}
}).addClass('menu').insertTo(this).hide();
this._menuTable = $E('table', {
style: {
width: (this._width + 10) + 'px',
border: 0,
cellPadding: 0,
cellSpacing: 0
}
}).addClass('menuTable').insertTo(this._menu);
this.options.choices.each(function(choice) {
if(choice.trim()) {
scope._addItem(choice);
}
else {
scope._addSeparator();
}
});
this.on('click', function() {
scope._menu.toggle();
});
},
getOption: function(name) {
return this._menuElements[name];
},
getOptions: function() {
return this._menuElements;
},
_addItem: function(name) {
var tr = $E('tr').insertTo(this._menuTable).setStyle({
fontFamily: 'Verdana',
fontSize: '10pt',
fontWeight: 'normal',
backgroundColor: 'white',
cursor: 'default'
});
this._menuElements[name] = $E('td').insertTo(tr).setStyle({
width: (this._width - 25) + 'px',
height: '25px',
textAligh: 'left',
verticalAlign: 'middle',
fontStyle: 'normal',
borderTop: '2px solid white',
borderBottom: '2px solid white',
borderRight: '2px solid white'
}).html(name.title() || ' ');
},
_addSeparator: function() {
var tr = $E('tr').insertTo(this._menuTable).setStyle({
cursor: 'default'
});
$E('td').insertTo(tr).setStyle({
width: (this._width - 25) + 'px',
height: '1px',
backgroundColor: 'gray'
});
}
});
var menu = new Menu(); // XXX: it might be nice to pass handlers as opts as well
var opts = menu.getOptions(); // this gives access to Menu item elems
// let's bind some handlers
var initClick = function(elem, optName) {
elem.on('click', function() {
// do something cool now
});
};
for(var optName in opts) {
var elem = opts[optName];
initClick(elem, optName);
}