mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 14:30:28 +00:00
102 lines
3.5 KiB
HTML
102 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery Mobile Docs - Checkboxes</title>
|
|
<link rel="stylesheet" href="../../../themes/default/" />
|
|
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
|
|
<script src="../../../js/jquery.js"></script>
|
|
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
|
|
<script src="../../_assets/js/jqm-docs.js"></script>
|
|
<script src="../../../js/"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page" class="type-interior">
|
|
|
|
<div data-role="header" data-theme="f">
|
|
<h1>Checkboxes</h1>
|
|
<a href="../../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content">
|
|
<div class="content-primary">
|
|
|
|
<form action="#" method="get">
|
|
|
|
<h2>Checkboxes</h2>
|
|
|
|
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
|
<li><a href="index.html" data-role="button" data-transition="fade">Basics</a></li>
|
|
<li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
|
|
<li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
|
|
<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
|
|
</ul>
|
|
|
|
<p>Since the native checkbox is used as a proxy for the custom checkbox, you can watch for events on the original, native checkbox instead of needing to go through the checkbox plugin. Bind to the change event by type: change, blur, focus, keypress, click, etc.</p>
|
|
<pre><code>
|
|
$("input[type='checkbox']").bind( "change", function(event, ui) {
|
|
...
|
|
});
|
|
</code></pre>
|
|
|
|
<p>The checkbox plugin has the following custom events:</p>
|
|
|
|
<dl>
|
|
|
|
<dt><code>create</code> triggered when a checkbox is created</dt>
|
|
<dd>
|
|
<p>This event is used to find out when a custom checkbox was created. It is not used to create a custom checkbox. The checkbox create event can be used like this: </p>
|
|
|
|
<pre><code>
|
|
$("input[type='checkbox']").checkboxradio({
|
|
create: function(event, ui) { ... }
|
|
});
|
|
</code></pre>
|
|
</dd>
|
|
|
|
|
|
</dl>
|
|
|
|
</form>
|
|
</div><!--/content-primary -->
|
|
|
|
<div class="content-secondary">
|
|
|
|
<div data-role="collapsible" data-collapsed="true" data-theme="b">
|
|
|
|
<h3>More in this section</h3>
|
|
|
|
<ul data-role="listview" data-theme="c" data-dividertheme="d">
|
|
|
|
<li data-role="list-divider">Form elements</li>
|
|
<li><a href="../docs-forms.html">Form basics</a></li>
|
|
<li><a href="../forms-all.html">Form element gallery</a></li>
|
|
<li><a href="../texts/index.html">Text inputs</a></li>
|
|
<li><a href="../forms-search.html">Search inputs</a></li>
|
|
<li><a href="../forms-slider.html">Slider</a></li>
|
|
<li><a href="../forms-switch.html">Flip toggle switch</a></li>
|
|
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
|
<li data-theme="a"><a href="index.html">Checkboxes</a></li>
|
|
<li><a href="../selects/index.html">Select menus</a></li>
|
|
<li><a href="../forms-themes.html">Theming forms</a></li>
|
|
<li><a href="../forms-all-native.html">Native form elements</a></li>
|
|
<li><a href="../forms-sample.html">Submitting forms</a></li>
|
|
<li><a href="../plugin-eventsmethods.html">Plugin methods</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content -->
|
|
|
|
<div data-role="footer" class="footer-docs" data-theme="c">
|
|
<p>© 2011 The jQuery Project</p>
|
|
</div>
|
|
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html>
|
|
|