fix css for selects with labels, allow for checkboxes with labels

This commit is contained in:
rlx 2011-10-03 15:02:19 +00:00
commit 54b7d9de9f
6 changed files with 81 additions and 38 deletions

View file

@ -5,11 +5,13 @@ Ox.Checkbox <f:Ox.Element> Checkbox Element
(options) -> <f> Checkbox Element
(options, self) -> <f> Checkbox Element
options <o> Options object
disabled <b> if true, checkbox is disabled
id <s> element id
group <b> if true, checkbox is part of a group
checked <b> if true, checkbox is checked
title <s> text on label
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)
width <n> width in px
self <o> Shared private variable
change <!> triggered when checked property changes, passes {checked, id, title}
@ -20,10 +22,12 @@ Ox.Checkbox = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
disabled: false,
id: '',
group: false,
checked: false,
disabled: false,
group: false,
id: '',
label: '',
labelWidth: 64,
overlap: 'none',
title: '',
width: 'auto'
@ -41,20 +45,31 @@ Ox.Checkbox = function(options, self) {
self.options.width != 'auto' && that.css({
width: self.options.width + 'px'
});
Ox.print(self.options.width - 16, self.options.label * (self.options.labelWidth - 16))
self.$title = Ox.Label({
disabled: self.options.disabled,
id: self.options.id + 'Label',
overlap: 'left',
title: self.options.title,
width: self.options.width - 16
- !!self.options.label * self.options.labelWidth
})
.css({
float: 'right'
})
.css({float: 'right'})
.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({
disabled: self.options.disabled,
id: self.options.id + 'Button',