0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

Ox.Checkbox: add indeterminate option

Browse source
This commit is contained in:
rlx 2016-02-10 12:56:19 +05:30
parent 0327947864
commit 368ae04fe0
2 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/forms/form_elements/js/example.js
View file

@ -190,6 +190,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
description: 'Checkbox with title', description: 'Checkbox with title',
title: 'Check me', title: 'Check me',
width: 128 width: 128
},
{
description: 'Checkbox, indeterminate',
indeterminate: true
} }
] ]
}, },

13
source/UI/js/Form/Checkbox.js
View file

@ -5,6 +5,7 @@ Ox.Checkbox <f> Checkbox Element
options <o> Options object options <o> Options object
disabled <b> if true, checkbox is disabled disabled <b> if true, checkbox is disabled
group <b> if true, checkbox is part of a group group <b> if true, checkbox is part of a group
indeterminate <b> if true, checkbox appears as indeterminate
label <s> Label (on the left side) label <s> Label (on the left side)
labelWidth <n|64> Label width labelWidth <n|64> Label width
title <s> Title (on the right side) title <s> Title (on the right side)
@ -22,6 +23,7 @@ Ox.Checkbox = function(options, self) {
.defaults({ .defaults({
disabled: false, disabled: false,
group: false, group: false,
indeterminate: false,
label: '', label: '',
labelWidth: 64, labelWidth: 64,
overlap: 'none', overlap: 'none',
@ -38,6 +40,13 @@ Ox.Checkbox = function(options, self) {
self.$button.options({disabled: disabled}); self.$button.options({disabled: disabled});
self.$title && self.$title.options({disabled: disabled}); self.$title && self.$title.options({disabled: disabled});
}, },
indeterminate: function() {
if (self.options.indeterminate) {
self.$button.options({value: 'minus'});
} else {
self.$button.toggle();
}
},
label: function() { label: function() {
self.$label.options({title: self.options.label}); self.$label.options({title: self.options.label});
}, },
@ -96,7 +105,8 @@ Ox.Checkbox = function(options, self) {
id: self.options.id + 'Button', id: self.options.id + 'Button',
style: self.options.style != 'rounded' ? self.options.style : '', style: self.options.style != 'rounded' ? self.options.style : '',
type: 'image', type: 'image',
value: self.options.value ? 'check' : 'none', value: self.options.indeterminate ? 'minus'
: self.options.value ? 'check' : 'none',
values: ['none', 'check'] values: ['none', 'check']
}) })
.addClass('OxCheckbox') .addClass('OxCheckbox')
@ -107,6 +117,7 @@ Ox.Checkbox = function(options, self) {
function clickButton() { function clickButton() {
self.options.value = !self.options.value; self.options.value = !self.options.value;
self.options.indeterminate = false;
that.triggerEvent('change', { that.triggerEvent('change', {
value: self.options.value value: self.options.value
}); });