oxjs/source/Ox.UI/js/Form/Ox.Checkbox.js

119 lines
3.5 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
2011-05-16 10:49:48 +00:00
/*@
Ox.Checkbox <f:Ox.Element> Checkbox Element
() -> <f> Checkbox Element
(options) -> <f> Checkbox Element
(options, self) -> <f> Checkbox Element
options <o> Options object
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)
2011-12-21 13:42:47 +00:00
value <b> if true, checkbox is checked
2011-05-16 10:49:48 +00:00
width <n> width in px
self <o> Shared private variable
2011-12-21 13:42:47 +00:00
change <!> triggered when value changes
2011-05-16 10:49:48 +00:00
@*/
2011-04-22 22:03:10 +00:00
2011-05-16 10:49:48 +00:00
Ox.Checkbox = function(options, self) {
2011-04-22 22:03:10 +00:00
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
disabled: false,
group: false,
id: '',
label: '',
labelWidth: 64,
2011-04-22 22:03:10 +00:00
overlap: 'none',
title: '',
2011-12-21 13:42:47 +00:00
value: false,
2011-04-22 22:03:10 +00:00
width: 'auto'
})
.options(options || {})
2011-11-03 15:42:41 +00:00
.addClass('OxCheckbox' + (
self.options.overlap == 'none'
? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap)
))
.attr({
disabled: self.options.disabled
});
2011-04-22 22:03:10 +00:00
if (self.options.title) {
self.options.width != 'auto' && that.css({
2011-06-04 01:41:47 +00:00
width: self.options.width + 'px'
});
self.$title = Ox.Label({
2011-04-22 22:03:10 +00:00
disabled: self.options.disabled,
id: self.options.id + 'Label',
overlap: 'left',
title: self.options.title,
2011-11-02 10:23:15 +00:00
width: getTitleWidth()
2011-04-22 22:03:10 +00:00
})
.css({float: 'right'})
2011-04-22 22:03:10 +00:00
.click(clickTitle)
.appendTo(that);
}
if (self.options.label) {
self.$label = Ox.Label({
overlap: 'right',
textAlign: 'right',
title: self.options.label,
width: self.options.labelWidth
})
.css({float: 'left'})
.appendTo(that);
}
self.$button = Ox.Button({
2011-04-22 22:03:10 +00:00
disabled: self.options.disabled,
id: self.options.id + 'Button',
2011-12-21 13:42:47 +00:00
type: 'image',
2011-12-22 05:52:46 +00:00
value: self.options.value ? 'check' : 'none',
values: ['none', 'check']
2011-04-22 22:03:10 +00:00
})
.addClass('OxCheckbox')
.bindEvent({
2011-12-21 13:42:47 +00:00
change: clickButton
})
2011-04-22 22:03:10 +00:00
.appendTo(that);
function clickButton() {
2011-12-21 13:42:47 +00:00
self.options.value = !self.options.value;
2011-04-22 22:03:10 +00:00
that.triggerEvent('change', {
2011-12-21 13:42:47 +00:00
value: self.options.value
2011-04-22 22:03:10 +00:00
});
}
function clickTitle() {
!self.options.disabled && self.$button.trigger('click');
}
2011-11-02 10:23:15 +00:00
function getTitleWidth() {
return self.options.width - 16
- !!self.options.label * self.options.labelWidth;
}
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-12-21 13:42:47 +00:00
if (key == 'disabled') {
that.attr({disabled: value});
self.$button.options({disabled: value});
self.$title && self.$title.options({disabled: value});
2011-10-03 13:23:40 +00:00
} else if (key == 'title') {
self.$title.options({title: value});
2011-12-21 13:42:47 +00:00
} else if (key == 'value') {
2011-12-23 09:54:20 +00:00
self.$button.toggle();
2011-11-02 10:23:15 +00:00
} else if (key == 'width') {
that.css({width: value + 'px'});
self.$title && self.$title.options({width: getTitleWidth()});
2011-04-22 22:03:10 +00:00
}
};
return that;
};