From 5565a4a22518bb44a5b5bea9327fd999bd94bcb1 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 2 Oct 2014 17:29:40 -0400 Subject: [PATCH] Updates to checkbox --- server/documents/modules/accordion.html.eco | 6 +- server/documents/modules/checkbox.html.eco | 247 +++++++++++++------- src/definitions/modules/checkbox.js | 21 +- 3 files changed, 178 insertions(+), 96 deletions(-) diff --git a/server/documents/modules/accordion.html.eco b/server/documents/modules/accordion.html.eco index dc2594fc1..d459579b4 100755 --- a/server/documents/modules/accordion.html.eco +++ b/server/documents/modules/accordion.html.eco @@ -496,17 +496,17 @@ themes : ['Default', 'Chubby'] debug - true + false Debug output to console performance - true + false Show console.table output with performance metrics verbose - true + false Debug output includes all internal behaviors diff --git a/server/documents/modules/checkbox.html.eco b/server/documents/modules/checkbox.html.eco index 30641d0ee..b34aed3a8 100755 --- a/server/documents/modules/checkbox.html.eco +++ b/server/documents/modules/checkbox.html.eco @@ -115,63 +115,18 @@ themes : ['Default'] -
- -

Checkbox

-

A checkbox can be initialized with javascript for increase programmatic control

- -
- $('.ui.checkbox') - .checkbox() - ; -
-
-
- - -
-
- -

Basic Checkbox

-

A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label

-
-
- - -
-
- -

Behavior

- - - - - - - - - - - - - -
enableA checkbox can change to show a user has selected it
disableA checkbox can change to show a user has deselected it
toggleA checkbox can toggle its current selection state
- - -
-

Examples

-

Disabled / Read Only / Forced

-

To 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 events even if initialized.

-

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

+

Uncheckable 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.

$('#demo3') .checkbox({ - uncheckable: true + uncheckable: false }) ;
@@ -252,72 +207,164 @@ themes : ['Default']
+
+

Initializing

+ +
+

Checkbox

+

A checkbox can be initialized with javascript for increase programmatic control

+ +
+ $('.ui.checkbox') + .checkbox() + ; +
+
+
+ + +
+
+
+ +
+

Basic Checkbox

+

A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label

+
+
+ + +
+
+
+ +

Behavior

+

Behaviors are accessible with javascript using the syntax:

+

+ $('.ui.checkbox').checkbox('behavior', argumentOne, argumentTwo...); +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
toggleSwitches a checkbox from current state
checkSet a checkbox state to checked
uncheckSet a checkbox state to unchecked
attach events(selector, behavior)Attach checkbox events to another element
enableEnable interaction with a checkbox
disableDisable interaction with a checkbox
is radioReturns whether element is radio selection
is checkedReturns whether element is currently checked
is uncheckedReturns whether element is not checked
can checkReturns whether element is able to be checked
+
+ +
+

Checkbox

+ +

These settings are specific to checkbox, and determine the parameters of its behavior

-

- Checkbox Settings -
Checkbox settings modify its behavior
-

- - + + - + - - - + + +
SettingDefaultDefault Description
requireduncheckable auto Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event contextfireOnInittrueWhether callbacks for checked status should be fired on init as well as change
-

- Callbacks -
Callbacks specify a function to occur after a specific behavior.
-

- - - + + - + + + + + + + + + + + - + - +
SettingContextContext Description
onChangeCheckboxHTML input element Callback after a checkbox is either disabled or enabled.
onCheckedHTML input elementCallback after a checkbox is checked.
onUncheckedHTML input elementCallback after a checkbox is unchecked.
onEnableCheckboxHTML input element Callback after a checkbox is enabled.
onDisableCheckboxHTML input element Callback after a checkbox is disabled.
-

DOM Settings -
DOM settings specify how this module should interface with the DOM
-

- +

Module

+ +

These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.

+
- - + + + + + + + @@ -325,22 +372,52 @@ themes : ['Default'] - + + + + + + + + + + + + + + + + + + + + + diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js index bc798455f..1897d8749 100755 --- a/src/definitions/modules/checkbox.js +++ b/src/definitions/modules/checkbox.js @@ -178,7 +178,7 @@ $.fn.checkbox = function(parameters) { }, uncheck: function() { return (typeof settings.uncheckable === 'boolean') - ? !settings.uncheckable + ? settings.uncheckable : !module.is.radio() ; } @@ -199,10 +199,15 @@ $.fn.checkbox = function(parameters) { disable: function() { module.debug('Enabling checkbox functionality'); $module.addClass(className.disabled); + $input.removeProp('disabled'); + $.proxy(settings.onDisabled, $input.get())(); }, + enable: function() { module.debug('Disabling checkbox functionality'); $module.removeClass(className.disabled); + $input.prop('disabled', 'disabled'); + $.proxy(settings.onEnabled, $input.get())(); }, check: function() { @@ -427,22 +432,22 @@ $.fn.checkbox.settings = { performance : true, // delegated event context - context : false, uncheckable : 'auto', - fireOnInit : true, + onChange : function(){}, + onChecked : function(){}, + onUnchecked : function(){}, + onEnabled : function(){}, + onDisabled : function(){}, + className : { checked : 'checked', - radio : 'radio', disabled : 'disabled', + radio : 'radio', readOnly : 'read-only' }, - onChange : function(){}, - onChecked : function(){}, - onUnchecked : function(){}, - error : { method : 'The method you called is not defined.' },
SettingDefaultDefault Description
nameCheckboxName used in log statements
namespace checkbox
selector -
- selector : { - input : 'input', - label : 'label' - } +
+
+ selector : { + input : 'input[type=checkbox], input[type=radio]', + label : 'label' + }
Selectors used to find parts of a module
className +
+ className : { + checked : 'checked', + disabled : 'disabled', + radio : 'radio', + readOnly : 'read-only' + } +
+ 		Class names used to determine element state
debugfalseDebug output to console
performancefalseShow console.table output with performance metrics
verbosefalseDebug output includes all internal behaviors
errors
- className : { - radio : 'radio' - } + error : { + method : 'The method you called is not defined.' + }