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

form elements rewrite, part 1

Browse source
This commit is contained in:
rlx 2011-12-21 13:42:47 +00:00
commit 7f83cd3141
30 changed files with 1061 additions and 958 deletions
Download patch file Download diff file Expand all files Collapse all files

48
source/Ox.UI/js/Form/Ox.Checkbox.js
View file

@ -6,16 +6,16 @@ Ox.Checkbox <f:Ox.Element> Checkbox Element
(options) -> <f> Checkbox Element
(options, self) -> <f> Checkbox Element
options <o> Options object
checked <b> if true, checkbox is checked
disabled <b> if true, checkbox is disabled
group <b> if true, checkbox is part of a group
id <s> element id
label <s> Label (on the left side)
labelWidth <n|64> Label width
title <s> Title (on the right side)
value <b> if true, checkbox is checked
width <n> width in px
self <o> Shared private variable
change <!> triggered when checked property changes, passes {checked, id, title}
change <!> triggered when value changes
@*/
Ox.Checkbox = function(options, self) {
@ -23,7 +23,6 @@ Ox.Checkbox = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
checked: false,
disabled: false,
group: false,
id: '',
@ -31,6 +30,7 @@ Ox.Checkbox = function(options, self) {
labelWidth: 64,
overlap: 'none',
title: '',
value: false,
width: 'auto'
})
.options(options || {})
@ -72,27 +72,20 @@ Ox.Checkbox = function(options, self) {
self.$button = Ox.Button({
disabled: self.options.disabled,
id: self.options.id + 'Button',
title: [
{id: 'none', title: 'none', selected: !self.options.checked},
{id: 'check', title: 'check', selected: self.options.checked}
],
type: 'image'
title: ['none', 'check'],
type: 'image',
value: self.options.value ? 'check' : 'none'
})
.addClass('OxCheckbox')
.bindEvent({
click: clickButton
change: clickButton
})
.appendTo(that);
function clickButton() {
self.options.checked = !self.options.checked;
// click will have toggled the button,
// if it is part of a group, we have to revert that
self.options.group && that.toggleChecked();
self.options.value = !self.options.value;
that.triggerEvent('change', {
checked: self.options.checked,
id: self.options.id,
title: self.options.title
value: self.options.value
});
}
@ -106,37 +99,20 @@ Ox.Checkbox = function(options, self) {
}
self.setOption = function(key, value) {
if (key == 'checked') {
that.toggleChecked();
} else if (key == 'disabled') {
if (key == 'disabled') {
that.attr({disabled: value});
self.$button.options({disabled: value});
self.$title && self.$title.options({disabled: value});
} else if (key == 'title') {
self.$title.options({title: value});
} else if (key == 'value') {
self.$button.toggleTitle();
} else if (key == 'width') {
that.css({width: value + 'px'});
self.$title && self.$title.options({width: getTitleWidth()});
}
};
/*@
checked <f> get current checked state
() -> <b> returns self.options.checked
@*/
that.checked = function() {
return self.options.checked;
}
/*@
toggleChecked <f> toggle current checked state
() -> <f> toggle state, returns Checkbox Element
@*/
that.toggleChecked = function() {
self.$button.toggleTitle();
return that;
}
// fixme: added for forms, duplicated, checked() shouldn't be neccessary
that.value = function() {
return self.options.checked;