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.
316 lines
10 KiB
316 lines
10 KiB
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<!-- Standard Meta -->
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
|
|
<!-- Site Properities -->
|
|
<meta http-equiv="X-Powered-By" content="DocPad v6.34.1"/>
|
|
<title>Checkbox | Semantic UI</title>
|
|
|
|
<meta name="description" content="Semantic empowers designers and developers by creating a shared vocabulary for UI." />
|
|
<meta name="keywords" content="html5, ui, library, framework, javascript" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
|
|
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/icons.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/button.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/header.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/label.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/progress.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/divider.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/collections/message.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/elements/segment.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/collections/grid.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/collections/items.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/collections/table.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/collections/form.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/collections/menu.css">
|
|
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/modules/shape.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/modules/popup.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/src/modules/checkbox.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/shape.css">
|
|
|
|
|
|
|
|
<script src="/javascript/library/jquery.js"></script>
|
|
<script src="/javascript/library/easing.js"></script>
|
|
<script src="/javascript/library/ace/ace.js"></script>
|
|
<script src="/javascript/library/sidr.js"></script>
|
|
<script src="/javascript/library/waypoints.js"></script>
|
|
|
|
<script src="/components/semantic/src/modules/behavior/state.js"></script>
|
|
<script src="/components/semantic/src/modules/shape.js"></script>
|
|
<script src="/components/semantic/src/modules/checkbox.js"></script>
|
|
<script src="/components/semantic/src/modules/popup.js"></script>
|
|
|
|
<script src="/javascript/semantic.js"></script>
|
|
<script src="/javascript/shape.js"></script>
|
|
|
|
</head>
|
|
<body id="example">
|
|
<div class="ui large vertical menu" id="menu">
|
|
<div class="item"><a href="/index.html"><b>Introduction</b></a></div>
|
|
<div class="item"><a href="/download.html"><b>Download</b></a></div>
|
|
<div class="item">
|
|
<a href="/element.html"><b>UI Elements</b></a>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/elements/button.html">Button</a>
|
|
|
|
<a class="item" href="/elements/label.html">Label</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<a href="/collection.html"><b>UI Collections</b></a>
|
|
<div class="menu">
|
|
|
|
<a class="item" href="/collections/form.html">Form</a>
|
|
|
|
<a class="item" href="/collections/grid.html">Grid</a>
|
|
|
|
<a class="item" href="/collections/menu.html">Menu</a>
|
|
|
|
<a class="item" href="/collections/message.html">Message</a>
|
|
|
|
<a class="item" href="/collections/table.html">Table</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<a href="/module.html"><b>UI Modules</b></a>
|
|
<div class="menu">
|
|
|
|
<a class="active item" href="/modules/checkbox.html">Checkbox</a>
|
|
|
|
<a class="item" href="/modules/shape.html">Shape</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<a href="/specification.html"><b>Specification</b></a>
|
|
<div class="menu">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui fixed transparent inverted main menu">
|
|
<div class="container">
|
|
<div class="title item">
|
|
<b>UI Module:</b> Checkbox
|
|
</div>
|
|
<div class="icon previous link disabled item">
|
|
|
|
<i class="icon left-open"></i>
|
|
|
|
</div>
|
|
<div class="section dropdown item">
|
|
1 of 2
|
|
<div class="menu">
|
|
|
|
<div class="active item">
|
|
<a href="/modules/checkbox.html">1. Checkbox</a>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<a href="/modules/shape.html">2. Shape</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="icon next link item">
|
|
|
|
<a href="/modules/shape.html"><i class="icon right-open"></i></a>
|
|
|
|
</div>
|
|
<div class="right menu">
|
|
<a class="popup designer item" title="Designer Mode">
|
|
<i class="icon easel"></i>
|
|
</a>
|
|
<a class="popup developer item" title="Developer Mode">
|
|
<i class="icon terminal"></i>
|
|
</a>
|
|
<a class="popup item" title="View project on Github" href="https://github.com/quirkyinc/semantic">
|
|
<i class="icon github"></i>
|
|
</a>
|
|
<!--
|
|
<div class="dropdown item">
|
|
<i class="icon tint"></i> Theme
|
|
<div class="theme menu">
|
|
<div class="active item" data-theme="flat">Flat</div>
|
|
<div class="item" data-theme="shaded">Shaded</div>
|
|
<div class="item" data-theme="classic">Classic</div>
|
|
</div>
|
|
</div>
|
|
!-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui teal huge sidebar right attached button">
|
|
<i class="icon th-list"></i>
|
|
<span class="text">Menu</span>
|
|
</div>
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1>Checkbox</h1>
|
|
<p>Checkbox is a plugin for attaching form events to UI checkbox</p>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing menu">
|
|
<a class="active item">Structure</a>
|
|
<a class="item">Behavior</a>
|
|
<a class="item">Examples</a>
|
|
<a class="item">Getting Started</a>
|
|
<a class="item">Settings</a>
|
|
</div>
|
|
</div>
|
|
<p>UI checkboxes do not need javascript to function correctly, checkboxs can be triggered by matching the label's for attribute to the id tag of an input field</p>
|
|
<p>However, there may be situations where it is less work to use javascript to initialize a checkbox then to manually assign ID tags to each field, or you might want to programmatically trigger the checkbox state. In these cases the checkbox module may be useful.</p>
|
|
|
|
<h2>Examples</h2>
|
|
|
|
<h3>Initializing a check box</h3>
|
|
<div class="code">$('.ui.checkbox')
|
|
.checkbox()
|
|
;
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h3>Check Box</h3>
|
|
<p>The html required for a standard UI checkbox</p>
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<label for="uniqueid"></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h3>Radio Box</h3>
|
|
<p>The html required for a standard UI radio box</p>
|
|
<p>A radio box is just a reskinned version of a checkbox, the initialization of the module is the same.</p>
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="foo" />
|
|
<label for="uniqueid"></label>
|
|
</div>
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="foo" />
|
|
<label for="uniqueid"></label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2>Getting Started</h2>
|
|
|
|
<p>The plugin must be initialized once before methods can be accessed</p>
|
|
<div class="code">$('.ui.checkbox')
|
|
.checkbox()
|
|
;</div>
|
|
|
|
<p>You can enable a checkbox programmatically using the enable method</p>
|
|
<div class="code">$('.ui.checkbox')
|
|
.checkbox('enable')
|
|
;</div>
|
|
|
|
<p>You can enable all checkboxes initialized at the same time by calling the enableAll method</p>
|
|
<div class="code">$('.ui.checkbox')
|
|
.checkbox('enableAll')
|
|
;</div>
|
|
|
|
|
|
<p>You can disable a checkbox programmatically using the disable method</p>
|
|
<div class="code">$('.ui.checkbox')
|
|
.checkbox('disable')
|
|
;</div>
|
|
|
|
<p>You can disable all checkboxes initialized at the same time by calling the disableAll method</p>
|
|
<div class="code">$('.ui.checkbox')
|
|
.checkbox('disableAll')
|
|
;</div>
|
|
<h3>Defaults</h3>
|
|
<table class="ui settings table">
|
|
<thead>
|
|
<th colspan="3">Callbacks</th>
|
|
</thead>
|
|
<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>
|
|
</table>
|
|
<table class="ui settings table">
|
|
<thead>
|
|
<th colspan="3">UI Module Settings</th>
|
|
</thead>
|
|
<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>
|
|
</body>
|
|
|
|
</html>
|