richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Updates to checkbox

pull/1139/merge
jlukic 10 years ago
parent
e641432dfc
commit
5565a4a225
3 changed files with 178 additions and 96 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      server/documents/modules/accordion.html.eco
  2. 247
      server/documents/modules/checkbox.html.eco
  3. 21
      src/definitions/modules/checkbox.js

6
server/documents/modules/accordion.html.eco
View File

@ -496,17 +496,17 @@ themes : ['Default', 'Chubby']
</tr>
<tr>
<td>debug</td>
<td>true</td>
<td>false</td>
<td>Debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>true</td>
<td>false</td>
<td>Show <code>console.table</code> output with performance metrics</td>
</tr>
<tr>
<td>verbose</td>
<td>true</td>
<td>false</td>
<td>Debug output includes all internal behaviors</td>
</tr>
<tr>

247
server/documents/modules/checkbox.html.eco
View File

@ -115,63 +115,18 @@ themes : ['Default']
</div>
<div class="ui tab" data-tab="usage">
<h3 class="ui header">Checkbox</h3>
<p>A checkbox can be initialized with javascript for increase programmatic control</p>
<div class="code">
$('.ui.checkbox')
.checkbox()
;
</div>
<div class="code" data-type="html">
<div class="ui checkbox">
<input type="checkbox">
<label>Poodle</label>
</div>
</div>
<h3 class="ui header">Basic Checkbox</h3>
<p>A checkbox can also be used without using javascript by matching the <code>id</code> attribute of the input field to the <code>for</code> attribute of the accompanying label</p>
<div class="code" data-type="html">
<div class="ui checkbox">
<input type="checkbox" id="unique-id" />
<label for="unique-id">Poodle</label>
</div>
</div>
<h2 class="ui dividing header">Behavior</h2>
<table class="ui definition celled table segment">
<tr>
<td>enable</td>
<td>A checkbox can change to show a user has selected it</td>
</tr>
<tr>
<td>disable</td>
<td>A checkbox can change to show a user has deselected it</td>
</tr>
<tr>
<td>toggle</td>
<td>A checkbox can toggle its current selection state</td>
</tr>
</table>
</div>
<div class="ui tab" data-tab="examples">
<h2>Examples</h2>
<div class="example">
<h4 class="ui header">Disabled / Read Only / Forced</h4>
<p>To disable a checkbox, add the property <code>disabled</code> to your input.</p>
<p>To make a checkbox read-only do not initialize it, or include the <code>read-only</code> class which will not allow events even if initialized.</p>
<p>To make a user able to check a box, but unable to uncheck it, use the <code>uncheckable</code> setting.</p>
<h4 class="ui header">Uncheckable Checkboxes</h4>
<p class="ignored">To make a user able to check a box, but unable to uncheck it, use the <code>uncheckable</code> setting.</p>
<p class="ignored">To always disable a checkbox, add the property <code>disabled</code> to your input.</p>
<p class="ignored">To make a checkbox read-only do not initialize it, or include the <code>read-only</code> class which will not allow toggle events.</p>
<div class="evaluated code" data-type="javascript">
$('#demo3')
.checkbox({
uncheckable: true
uncheckable: false
})
;
</div>
@ -252,72 +207,164 @@ themes : ['Default']
</div>
</div>
<div class="ui tab" data-tab="usage">
<h2 class="ui dividing header">Initializing</h2>
<div class="no example">
<h4 class="ui dividing header">Checkbox</h4>
<p>A checkbox can be initialized with javascript for increase programmatic control</p>
<div class="code">
$('.ui.checkbox')
.checkbox()
;
</div>
<div class="code" data-type="html">
<div class="ui checkbox">
<input type="checkbox">
<label>Poodle</label>
</div>
</div>
</div>
<div class="no example">
<h4 class="ui dividing header">Basic Checkbox</h4>
<p>A checkbox can also be used without using javascript by matching the <code>id</code> attribute of the input field to the <code>for</code> attribute of the accompanying label</p>
<div class="code" data-type="html">
<div class="ui checkbox">
<input type="checkbox" id="unique-id" />
<label for="unique-id">Poodle</label>
</div>
</div>
</div>
<h2 class="ui dividing header">Behavior</h2
>
<p>Behaviors are accessible with javascript using the syntax:<p>
<div class="code">
$('.ui.checkbox').checkbox('behavior', argumentOne, argumentTwo...);
</div>
<table class="ui definition celled table segment">
<tr>
<td>toggle</td>
<td>Switches a checkbox from current state</td>
</tr>
<tr>
<td>check</td>
<td>Set a checkbox state to checked</td>
</tr>
<tr>
<td>uncheck</td>
<td>Set a checkbox state to unchecked</td>
</tr>
<tr>
<td>attach events(selector, behavior)</td>
<td>Attach checkbox events to another element</td>
</tr>
<tr>
<td>enable</td>
<td>Enable interaction with a checkbox</td>
</tr>
<tr>
<td>disable</td>
<td>Disable interaction with a checkbox</td>
</tr>
<tr>
<td>is radio</td>
<td>Returns whether element is radio selection</td>
</tr>
<tr>
<td>is checked</td>
<td>Returns whether element is currently checked</td>
</tr>
<tr>
<td>is unchecked</td>
<td>Returns whether element is not checked</td>
</tr>
<tr>
<td>can check</td>
<td>Returns whether element is able to be checked</td>
</tr>
</table>
</div>
<div class="ui tab" data-tab="settings">
<h2 class="ui dividing header">Checkbox</h2>
<p>These settings are specific to checkbox, and determine the parameters of its behavior</p>
<h3 class="ui header">
Checkbox Settings
<div class="sub header">Checkbox settings modify its behavior</div>
</h3>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th class="three wide"></th>
<th class="three wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>required</td>
<td>uncheckable</td>
<td>auto</td>
<td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td>
</tr>
<tr>
<td>context</td>
<td>false</td>
<td>A selector or jQuery object to use as a delegated event context</td>
<td>fireOnInit</td>
<td>true</td>
<td>Whether callbacks for checked status should be fired on init as well as change</td>
</tr>
</tbody>
</table>
<h3 class="ui header">
Callbacks
<div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
</h3>
<table class="ui celled sortable definition table segment">
<thead>
<th class="four wide">Setting</th>
<th>Context</th>
<th class="three wide"></th>
<th class="three wide">Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>onChange</td>
<td>Checkbox</td>
<td>HTML input element</td>
<td>Callback after a checkbox is either disabled or enabled.</td>
</tr>
<tr>
<td>onChecked</td>
<td>HTML input element</td>
<td>Callback after a checkbox is checked.</td>
</tr>
<tr>
<td>onUnchecked</td>
<td>HTML input element</td>
<td>Callback after a checkbox is unchecked.</td>
</tr>
<tr>
<td>onEnable</td>
<td>Checkbox</td>
<td>HTML input element</td>
<td>Callback after a checkbox is enabled.</td>
</tr>
<tr>
<td>onDisable</td>
<td>Checkbox</td>
<td>HTML input element</td>
<td>Callback after a checkbox is disabled.</td>
</tr>
</tbody>
</table>
<h3 class="ui header">DOM Settings
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
</h3>
<table class="ui celled sortable definition table segment">
<h2 class="ui dividing header">Module</h2>
<p>These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.</p>
<table class="ui sortable celled definition table">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th></th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>Checkbox</td>
<td>Name used in log statements</td>
</tr>
<tr>
<td>namespace</td>
<td>checkbox</td>
@ -325,22 +372,52 @@ themes : ['Default']
</tr>
<tr>
<td>selector</td>
<td colspan="2">
<div class="code">
selector : {
input : 'input',
label : 'label'
}
<td>
<div class="code" data-type="css">
selector : {
input : 'input[type=checkbox], input[type=radio]',
label : 'label'
}
</div>
</td>
<td>Selectors used to find parts of a module</td>
</tr>
<tr>
<td>className</td>
<td>
<div class="code">
className : {
checked : 'checked',
disabled : 'disabled',
radio : 'radio',
readOnly : 'read-only'
}
</div>
</td>
<td>Class names used to determine element state</td>
</tr>
<tr>
<td>debug</td>
<td>false</td>
<td>Debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>false</td>
<td>Show <code>console.table</code> output with performance metrics</td>
</tr>
<tr>
<td>verbose</td>
<td>false</td>
<td>Debug output includes all internal behaviors</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
className : {
radio : 'radio'
}
error : {
method : 'The method you called is not defined.'
}
</div>
</td>
</tr>

21
src/definitions/modules/checkbox.js
View File

@ -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.'
},

Write Preview
Loading…
Cancel
Save