fix css for selects with labels, allow for checkboxes with labels
This commit is contained in:
parent
0b53fc0566
commit
54b7d9de9f
6 changed files with 81 additions and 38 deletions
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue