diff --git a/examples/forms/form_elements/js/example.js b/examples/forms/form_elements/js/example.js index dcf8d95e..f692d659 100644 --- a/examples/forms/form_elements/js/example.js +++ b/examples/forms/form_elements/js/example.js @@ -190,6 +190,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { description: 'Checkbox with title', title: 'Check me', width: 128 + }, + { + description: 'Checkbox, indeterminate', + indeterminate: true } ] }, diff --git a/source/UI/js/Form/Checkbox.js b/source/UI/js/Form/Checkbox.js index 24b286c0..9bc49de8 100644 --- a/source/UI/js/Form/Checkbox.js +++ b/source/UI/js/Form/Checkbox.js @@ -5,6 +5,7 @@ Ox.Checkbox Checkbox Element options Options object disabled if true, checkbox is disabled group if true, checkbox is part of a group + indeterminate if true, checkbox appears as indeterminate label Label (on the left side) labelWidth Label width title Title (on the right side) @@ -22,6 +23,7 @@ Ox.Checkbox = function(options, self) { .defaults({ disabled: false, group: false, + indeterminate: false, label: '', labelWidth: 64, overlap: 'none', @@ -38,6 +40,13 @@ Ox.Checkbox = function(options, self) { self.$button.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() { self.$label.options({title: self.options.label}); }, @@ -96,7 +105,8 @@ Ox.Checkbox = function(options, self) { id: self.options.id + 'Button', style: self.options.style != 'rounded' ? self.options.style : '', type: 'image', - value: self.options.value ? 'check' : 'none', + value: self.options.indeterminate ? 'minus' + : self.options.value ? 'check' : 'none', values: ['none', 'check'] }) .addClass('OxCheckbox') @@ -107,6 +117,7 @@ Ox.Checkbox = function(options, self) { function clickButton() { self.options.value = !self.options.value; + self.options.indeterminate = false; that.triggerEvent('change', { value: self.options.value });