mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
Merge pull request #2175 from ovargas27/master
Radio button - new API docs format. Thanks ovargas27!
This commit is contained in:
commit
2aad1bf345
25 changed files with 344 additions and 39 deletions
|
|
@ -132,7 +132,7 @@ myswitch .slider("refresh");
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -220,7 +220,7 @@
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li data-theme="a"><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="forms-selects.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="forms-selects.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
<li data-theme="a"><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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ $("input[type=range]").val(60).slider("refresh");
|
|||
<li><a href="forms-search.html">Search inputs</a></li>
|
||||
<li data-theme="a"><a href="forms-slider.html">Slider</a></li>
|
||||
<li><a href="forms-switch.html">Flip toggle switch</a></li>
|
||||
<li><a href="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ myswitch .slider("refresh");
|
|||
<li><a href="forms-search.html">Search inputs</a></li>
|
||||
<li><a href="forms-slider.html">Slider</a></li>
|
||||
<li data-theme="a"><a href="forms-switch.html">Flip toggle switch</a></li>
|
||||
<li><a href="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -381,7 +381,7 @@
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li data-theme="a"><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ $('input').button('disable');
|
|||
<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="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="selects/index.html">Select menus</a></li>
|
||||
<li><a href="forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
102
docs/forms/radiobuttons/events.html
Normal file
102
docs/forms/radiobuttons/events.html
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Radio buttons</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>Radio buttons</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>Radio buttons</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 radio button is used as a proxy for the custom radio button, you can watch for events on the original, native radio button instead of needing to go through the radio button plugin. Bind to the change event by type: change, blur, focus, keypress, click, etc.</p>
|
||||
<pre><code>
|
||||
$("input[type='radio']").bind( "change", function(event, ui) {
|
||||
...
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
<p>The radio button plugin has the following custom events:</p>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt><code>create</code> triggered when a radio button is created</dt>
|
||||
<dd>
|
||||
<p>This event is used to find out when a custom radio button was created. It is not used to create a custom radio button. The radio button create event can be used like this: </p>
|
||||
|
||||
<pre><code>
|
||||
$("input[type='radio']").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 data-theme="a"><a href="index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.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>
|
||||
|
||||
|
|
@ -6,10 +6,10 @@
|
|||
<title>jQuery Mobile Docs - Radio Buttons</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>
|
||||
<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>
|
||||
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<div data-role="header" data-theme="f">
|
||||
<h1>Radio buttons</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
<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">
|
||||
|
|
@ -26,6 +26,14 @@
|
|||
<form action="#" method="get">
|
||||
|
||||
<h2>Radio buttons</h2>
|
||||
|
||||
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
|
||||
<li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">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">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Radio buttons are used to provide a list of options where only a single items can be selected. Traditional desktop radio buttons are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
|
||||
|
||||
<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. </p>
|
||||
|
|
@ -126,19 +134,19 @@ $("input[type='radio']").attr("checked",true).checkboxradio("refresh");
|
|||
<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 data-theme="a"><a href="forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="forms-checkboxes.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>
|
||||
<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 data-theme="a"><a href="index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.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>
|
||||
105
docs/forms/radiobuttons/methods.html
Normal file
105
docs/forms/radiobuttons/methods.html
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Radio buttons</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>Radio buttons</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>Radio buttons</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" class="ui-btn-active">Methods</a></li>
|
||||
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>The radio button has the following methods:</p>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt><code>enable</code> enable a disabled radio button</dt>
|
||||
<dd>
|
||||
<pre><code>
|
||||
$("input[type='radio']").checkboxradio('enable');
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
<dt><code>disable</code> disable a select.</dt>
|
||||
<dd>
|
||||
<pre><code>
|
||||
$("input[type='radio']").checkboxradio('disable');
|
||||
</code></pre>
|
||||
</dd>
|
||||
|
||||
<dt><code>refresh</code> update the custom select</dt>
|
||||
<dd>
|
||||
If you manipulate a radio button via JavaScript, you must call the refresh method on it to update the visual styling.
|
||||
<pre><code>
|
||||
$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
|
||||
</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 data-theme="a"><a href="index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.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>
|
||||
|
||||
90
docs/forms/radiobuttons/options.html
Normal file
90
docs/forms/radiobuttons/options.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery Mobile Docs - Radio buttons</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>Radio buttons</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>Radio buttons</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" class="ui-btn-active">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">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>The radio button has the following options:</p>
|
||||
|
||||
<dl>
|
||||
|
||||
<dt><code>theme</code> <em>string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: null, inherited from parent</p>
|
||||
<p>Sets the theme swatch color scheme for the radio button. This is a single letter from a-z that maps to the swatches included in your theme. By default, a radio button will inherit the same swatch color as it's parent container if not explicitly set. This option is also exposed as a data attribute: <code>data-theme="a"</code></p>
|
||||
<pre><code>$("input[type='radio'").checkboxradio(<strong>{ theme: "a" }</strong>);</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 data-theme="a"><a href="index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.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>
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ $( ".selector" ).selectmenu({
|
|||
<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="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li data-theme="a"><a href="index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -462,7 +462,7 @@ myselect.selectmenu("refresh");
|
|||
<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="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li data-theme="a"><a href="index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ $('select').selectmenu('refresh', true);
|
|||
<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="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li data-theme="a"><a href="index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@
|
|||
<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="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li data-theme="a"><a href="index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ $( ".selector" ).textinput({
|
|||
<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="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
<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="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ $('select').selectmenu('disable');
|
|||
<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="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
<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="../forms-radiobuttons.html">Radio buttons</a></li>
|
||||
<li><a href="../radiobuttons/index.html">Radio buttons</a></li>
|
||||
<li><a href="../forms-checkboxes.html">Checkboxes</a></li>
|
||||
<li><a href="../selects/index.html">Select menus</a></li>
|
||||
<li><a href="../forms-themes.html">Theming forms</a></li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue