From 91d06e345a334f4ab0ff6a1b10e2225f66af8270 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Thu, 25 Jun 2015 21:22:45 -0400 Subject: [PATCH] Complete examples for checkbox --- server/documents/modules/checkbox.html.eco | 151 ++++++++++++++++----- server/files/stylesheets/docs.css | 16 +++ 2 files changed, 133 insertions(+), 34 deletions(-) diff --git a/server/documents/modules/checkbox.html.eco b/server/documents/modules/checkbox.html.eco index bd55606ed..6f6d2e18e 100755 --- a/server/documents/modules/checkbox.html.eco +++ b/server/documents/modules/checkbox.html.eco @@ -232,12 +232,98 @@ themes : ['Default', 'Colored'] -
+

Examples

+
+

Avoiding Callback Hell

+

Checkbox has two versions of each state change behavior to let you determine whether the call should trigger checkbox callbacks.

+

Calling a standard behavior like check will trigger callbacks, however using set checked will adjust the checkbox state without triggering callbacks

+

This can help distinguish between user invoked state changes, and those triggered programmaticaly, and can help avoid recursion in grouped relationships

+
+
+
+
+ + +
+
+
+ + +
+
+
+
+
+
+ Console +
+
+
+
+
+
Toggle
+
Check
+
Uncheck
+
Indeterminate
+
Determinate
+
Enable
+
Disable
+
+
+
+
Set Checked
+
Set Unchecked
+
Set Indeterminate
+
Set Determinate
+
Set Enabled
+
Set Disabled
+
+
+
+
+ var + $console = $('.callback .console') + ; + $('.callback.example .checkbox') + .checkbox() + .first().checkbox({ + onChecked: function() { + $console.append('onChecked called
'); + }, + onUnchecked: function() { + $console.append('onUnchecked called
'); + }, + onEnable: function() { + $console.append('onEnable called
'); + }, + onDisable: function() { + $console.append('onDisable called
'); + }, + onDeterminate: function() { + $console.append('onDeterminate called
'); + }, + onIndeterminate: function() { + $console.append('onIndeterminate called
'); + }, + onChange: function() { + $console.append('onChange called
'); + } + }) + ; + // bind events to buttons + $('.callback.example .button') + .on('click', function() { + $('.callback .checkbox').checkbox( $(this).data('method') ); + }) + ; +
+

Grouped Checkboxes

-

The indeterminate state can be used to represent a value that is neither checked or unchecked.

+

The indeterminate state can be used to represent a value that is neither checked or unchecked.

+

This can be useful with groups where a "master" checkbox, should display the selections of several other checkboxes

@@ -293,38 +379,37 @@ themes : ['Default', 'Colored']
-
- // master checkbox +
$('.list .master.checkbox') .checkbox({ - onChange : function () { + // check all children + onChecked: function() { var - $parentCheckbox = $(this), $childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox') ; - // change state of child checkbox - if( $parentCheckbox.checkbox('is indeterminate') ) { - return; - } - else if( $parentCheckbox.checkbox('is checked') ) { - $childCheckbox.checkbox('check'); - } - else { - $childCheckbox.checkbox('uncheck') - } + $childCheckbox.checkbox('check'); + }, + // uncheck all children + onUnchecked: function() { + var + $childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox') + ; + $childCheckbox.checkbox('uncheck'); } }) ;
-
- // child list checkbox +
$('.list .child.checkbox') .checkbox({ + // Fire on load to set parent value fireOnInit : true, + // Change parent state on each child checkbox change onChange : function() { var - $parentCheckbox = $(this).closest('.list').closest('.item').children('.checkbox'), - $checkbox = $(this).closest('.list').not('.ui').find('.checkbox'), + $listGroup = $(this).closest('.list'), + $parentCheckbox = $listGroup.closest('.item').children('.checkbox'), + $checkbox = $listGroup.find('.checkbox'), allChecked = true, allUnchecked = true ; @@ -337,31 +422,29 @@ themes : ['Default', 'Colored'] allChecked = false; } }); - // set parent checkbox to match + // set parent checkbox state, but dont trigger its onChange callback if(allChecked) { - console.log('checking parent'); - $parentCheckbox.checkbox('set input checked'); + $parentCheckbox.checkbox('set checked'); } else if(allUnchecked) { - console.log('unchecking parent'); - $parentCheckbox.checkbox('set input unchecked'); + $parentCheckbox.checkbox('set unchecked'); } else { - console.log('indeterminate parent'); - $parentCheckbox.checkbox('set input indeterminate'); + $parentCheckbox.checkbox('set indeterminate'); } } }) ;
-
-

Uncheckable Checkboxes

+
+

One Way Checkboxes

To make a user able to check a box, but unable to uncheck it, use the uncheckable setting.

To always disable a checkbox, add the property disabled to your input.

-

To make a checkbox read-only do not initialize it, or include the read-only class which will not allow toggle events.

+

To make a checkbox read-only do not initialize it, or include the read-only class which will not allow events.

- $('#demo3') + $('.state.example .checkbox') + .last() .checkbox({ uncheckable: false }) @@ -371,19 +454,19 @@ themes : ['Default', 'Colored']
- +
- +
- +
diff --git a/server/files/stylesheets/docs.css b/server/files/stylesheets/docs.css index c9e4a4cc3..58f7100b7 100755 --- a/server/files/stylesheets/docs.css +++ b/server/files/stylesheets/docs.css @@ -718,6 +718,14 @@ blockquote .author { min-width: 100px; } +/* Examples Tab */ +#example .examples.tab .example > p { + margin: 1em 0em; +} +#example .examples.tab .example .anchor + p { + padding: 0em; +} + /* Intro Tab */ #example .intro > h3.ui.header { margin-top: 4em; @@ -975,6 +983,14 @@ blockquote .author { margin-bottom: 0em; } +/*-------------- + Callback +---------------*/ + +#example .callback.example .console { + height: 350px; + overflow: auto; +} /*-------------- Fitted