Ox.Checkbox: add indeterminate option

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
                     }
                 ]
             },

source/UI/js/Form/Checkbox.js

@@ -5,6 +5,7 @@ Ox.Checkbox <f> Checkbox Element
     options <o> Options object
         disabled <b> if true, checkbox is disabled
         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)
         labelWidth <n|64> Label width
         title <s> 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
         });