sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

add Ox.MenuButton

Browse source
This commit is contained in:
rlx 2011-12-20 07:07:57 +00:00
commit 9f151e2e60
4 changed files with 169 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

68
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -8,21 +8,27 @@ Ox.Select <f:Ox.Element> Select Object
(options) -> <f> Select Object
(options, self) -> <f> Select Object
options <o> Options object
id <s> element id
items <a|[]> items
disabled <b|false> If true, select is disabled
id <s> Element id
items <a|[]> Items
label <s|''> Label
labelWidth <n|64> Label width
max <n|1> minimum number of selected items
min <n|1> maximum number of selected items
overlap <s|'none'> can be none, left or right
max <n|1> Maximum number of selected items
maxWidth <n|0> Maximum menu width
min <n|1> Minimum number of selected items
overlap <s|'none'> Can be 'none', 'left' or 'right'
selectable <b|true> is selectable
size <s|'medium'> size, can be small, medium, large
title <s|''> select title
type <s|'text'> can be 'text' or 'image'
width <s|n|'auto'> can be auto or width in pixels
self <o> shared private variable
click <!> on click event
change <!> on change event
size <s|'medium'> Size, can be small, medium, large
style <s|'rounded'> Style ('rounded' or 'square')
title <s|''> Select title
tooltip <s|f|''> Tooltip title, or function that returns one
(e) -> <string> Tooltip title
e <object> Mouse event
type <s|'text'> Type ('text' or 'image')
width <s|n|'auto'> Width in px, or 'auto'
self <o> Shared private variable
click <!> Click event
change <!> Change event
@*/
Ox.Select = function(options, self) {
@ -65,26 +71,13 @@ Ox.Select = function(options, self) {
width: self.options.width - 2 + 'px'
})
.bindEvent({
click: showMenu,
key_escape: loseFocus,
key_down: showMenu
});
Ox.Log('Form', 'Ox.Select', self.options);
/*
self.options.items.forEach(function(item, i) {
if (Ox.isUndefined(item.id)) {
self.options.items[i].id = item.title;
}
});
*/
Ox.extend(self, {
buttonId: self.options.id + 'Button',
groupId: self.options.id + 'Group',
menuId: self.options.id + 'Menu'
});
if (self.options.selectable) {
self.optionGroup = new Ox.OptionGroup(
self.options.items,
@ -119,30 +112,29 @@ Ox.Select = function(options, self) {
self.options.title
|| self.options.items[self.checked[0]].title
)
.click(showMenu)
.appendTo(that.$element);
.appendTo(that);
}
self.$button = Ox.Button({
id: self.buttonId,
id: self.options.id + 'Button',
style: 'symbol',
title: 'select',
title: self.options.type == 'text' || !self.options.title
? 'select' : self.options.title,
type: 'image'
})
.bindEvent('click', showMenu)
.appendTo(that);
self.$menu = Ox.Menu({
element: self.$title || self.$button,
id: self.menuId,
id: self.options.id + 'Menu',
items: [self.options.selectable ? {
group: self.groupId,
group: self.options.id + 'Group',
items: self.options.items,
max: self.options.max,
min: self.options.min
} : self.options.items],
maxWidth: self.options.maxWidth,
side: 'bottom',
side: 'bottom', // FIXME: should be edge
size: self.options.size
})
.bindEvent({
@ -204,11 +196,15 @@ Ox.Select = function(options, self) {
self.$label.options({width: value});
self.$title.css({width: getTitleWidth() + 'px'});
} else if (key == 'title') {
self.$title.html(value);
if (self.options.type == 'text') {
self.$title.html(value);
} else {
self.$button.options({title: value});
}
} else if (key == 'width') {
Ox.Log('Form', 'SETTING WIDTH OPTION', value)
self.$title.css({width: getTitleWidth() + 'px'});
that.css({width: value - 2 + 'px'});
self.$title.css({width: getTitleWidth() + 'px'});
} else if (key == 'value') {
Ox.Log('Form', 'SETTING VALUE OPTION', value)
that.selectItem(value);