You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
331 lines
8.2 KiB
331 lines
8.2 KiB
---
|
|
layout : 'default'
|
|
css : 'checkbox'
|
|
|
|
title : 'Checkbox'
|
|
type : 'UI Module'
|
|
---
|
|
<script src="/javascript/checkbox.js"></script>
|
|
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1 class="ui dividing header">Checkbox</h1>
|
|
<p>A checkbox is a <a href="/module.html">ui module</a> which indicates a user's selection of a choice.</p>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Standard</a>
|
|
<a class="item">Variations</a>
|
|
<a class="item">Behavior</a>
|
|
<a class="item">Examples</a>
|
|
<a class="item">Usage</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Standard</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Check Box</h4>
|
|
<p>A standard checkbox</p>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<div class="box"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Static Check Box</h4>
|
|
<p>A checkbox can function without javascript</p>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" id="unique-id" />
|
|
<label class="box" for="unique-id"></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Form Checkbox</h4>
|
|
<p>A checkbox can be found inside a form</p>
|
|
<div class="ui form segment">
|
|
<div class="field">
|
|
<label>Name</label>
|
|
<input placeholder="Name" type="text">
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<label>Accept all our evil terms and conditions</label>
|
|
</div>
|
|
<div class="ui teal button">Submit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Radio Box</h4>
|
|
<p>A checkbox can be formatted as a radio element. This means it is an exclusive option.</p>
|
|
<div class="ui form">
|
|
<div class="inline field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label></label>
|
|
</div>
|
|
<label> Apples</label>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label></label>
|
|
</div>
|
|
<label> Oranges</label>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label></label>
|
|
</div>
|
|
<label> Pears</label>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label></label>
|
|
</div>
|
|
<label> Grapefruit</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Size</h4>
|
|
<p>A checkbox can be a different size.</p>
|
|
<h4 class="ui red block header">
|
|
<div class="ui large checkbox">
|
|
<input type="checkbox" />
|
|
<label></label>
|
|
</div>
|
|
Add a pro membership
|
|
</h4>
|
|
<br><br>
|
|
<h3 class="ui blue block header">
|
|
<div class="ui huge checkbox">
|
|
<input type="checkbox" />
|
|
<label></label>
|
|
</div>
|
|
Signup for our mailing list
|
|
</h3>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Behavior</h2>
|
|
|
|
<div class="example">
|
|
<p>A checkbox can change to show a user has selected it</p>
|
|
<div class="ignore code">
|
|
$('.ui.checkbox')
|
|
.checkbox('enable')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<p>A checkbox can change to show a user has not selected it</p>
|
|
<div class="ignore code">
|
|
$('.ui.checkbox')
|
|
.checkbox('disable')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<p>A checkbox can toggle between states</p>
|
|
<div class="ignore code">
|
|
$('.ui.checkbox')
|
|
.checkbox('toggle')
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Examples</h2>
|
|
|
|
<div class="example">
|
|
<p>Example of using checkbox states to alter multiple checkboxes</p>
|
|
<div class="evaluated code">
|
|
$('.enable.button')
|
|
.on('click', function() {
|
|
$(this)
|
|
.parent()
|
|
.nextAll('.checkbox')
|
|
.checkbox('enable')
|
|
;
|
|
})
|
|
;
|
|
$('.disable.button')
|
|
.on('click', function() {
|
|
$(this)
|
|
.parent()
|
|
.nextAll('.checkbox')
|
|
.checkbox('disable')
|
|
;
|
|
})
|
|
;
|
|
$('.toggle.button')
|
|
.on('click', function() {
|
|
$(this)
|
|
.parent()
|
|
.nextAll('.checkbox')
|
|
.checkbox('toggle')
|
|
;
|
|
})
|
|
;
|
|
</div>
|
|
<div class="ui buttons">
|
|
<div class="ui enable button">Enable</div>
|
|
<div class="ui disable button">Disable</div>
|
|
<div class="ui toggle button">Toggle</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" checked="checked" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" checked="checked" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" checked="checked" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" checked="checked" />
|
|
<div class="box"></div>
|
|
</div>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<div class="box"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="ui dividing header">Usage</h2>
|
|
|
|
<h3>Initializing</h3>
|
|
<h3 class="ui header">Initializing a check box</h3>
|
|
<div class="code">
|
|
$('.ui.checkbox')
|
|
.checkbox()
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Settings</h3>
|
|
<table class="ui red table segment">
|
|
<thead>
|
|
<th colspan="3">Checkbox Settings</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>required</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>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="ui teal table segment">
|
|
<thead>
|
|
<th colspan="3">Callbacks</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>onChange</td>
|
|
<td>None</td>
|
|
<td>Callback after a checkbox is either disabled or enabled.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onEnable</td>
|
|
<td>None</td>
|
|
<td>Callback after a checkbox is enabled.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onDisable</td>
|
|
<td>None</td>
|
|
<td>Callback after a checkbox is disabled.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="ui blue table segment">
|
|
<thead>
|
|
<th colspan="3">UI Module Settings</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>moduleName</td>
|
|
<td>Checkbox</td>
|
|
<td>Name used in debug logs</td>
|
|
</tr>
|
|
<tr>
|
|
<td>debug</td>
|
|
<td>True</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>performance</td>
|
|
<td>False</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>verbose</td>
|
|
<td>False</td>
|
|
<td>Provides ancillary debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>namespace</td>
|
|
<td>checkbox</td>
|
|
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>errors</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
errors : {
|
|
method : 'The method you called is not defined.'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|