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

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

35
source/Ox.UI/js/Form/Ox.Checkbox.js
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',

4
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -24,6 +24,8 @@ Ox.Input <f:Ox.Element> Input Element
height <n> px (for type='textarea' and type='range' with orientation='horizontal')
id <s> element id
key <s> to be passed to autocomplete and autovalidate functions
label <s|''> Label
labelWidth <n|64> Label width
max <n> max value if type is 'int' or 'float'
min <n> min value if type is 'int' or 'float'
name <s> will be displayed by autovalidate function ('invalid ' + name)
@ -31,7 +33,7 @@ Ox.Input <f:Ox.Element> Input Element
picker <o> picker object
rangeOptions <o> range options
arrows <b>boolean, if true, display arrows
//arrowStep <n> number, step when clicking arrows
//arrowStep <n> number, step when clicking arrows
//arrowSymbols <a> array of two strings
max <n> number, maximum value
min <n> number, minimum value

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

@ -8,6 +8,8 @@ Ox.Select <f:Ox.Element> Select Object
options <o> Options object
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
@ -32,6 +34,8 @@ Ox.Select = function(options, self) {
.defaults({
id: '',
items: [],
label: '',
labelWidth: 64,
max: 1,
min: 1,
overlap: 'none', // can be none, left or right
@ -46,9 +50,10 @@ Ox.Select = function(options, self) {
// or allow for extra action items below options
.options(options)
.addClass(
'OxSelect Ox' + Ox.toTitleCase(self.options.size) +
(self.options.overlap == 'none' ? '' : ' OxOverlap' +
Ox.toTitleCase(self.options.overlap))
'OxSelect Ox' + Ox.toTitleCase(self.options.size) + (
self.options.overlap == 'none'
? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap)
) + (self.options.label ? ' OxLabelSelect' : '')
)
.css(self.options.width == 'auto' ? {} : {
width: self.options.width - 2 + 'px'