mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-09 15:14:44 +00:00
updated nav options and standardized options descriptions
This commit is contained in:
parent
afe1ea5a9a
commit
725210673b
20 changed files with 37 additions and 44 deletions
|
|
@ -34,12 +34,12 @@
|
|||
<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>
|
||||
<p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
|
||||
<pre><code>
|
||||
$("input[type='checkbox']").bind( "change", function(event, ui) {
|
||||
...
|
||||
});
|
||||
</code></pre>
|
||||
</code></pre>
|
||||
|
||||
<p>The checkbox plugin has the following custom events:</p>
|
||||
|
||||
|
|
@ -47,8 +47,7 @@ $("input[type='checkbox']").bind( "change", function(event, ui) {
|
|||
|
||||
<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) { ... }
|
||||
|
|
@ -74,7 +73,7 @@ $("input[type='checkbox']").checkboxradio({
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -108,12 +108,6 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
|
||||
<h2>Refreshing a checkbox</h2>
|
||||
|
||||
<p>If you manipulate a radiobutton via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:</p>
|
||||
<code>
|
||||
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
|
||||
</code>
|
||||
|
||||
|
||||
|
||||
|
|
@ -133,7 +127,7 @@ $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ $("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<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 checkbox. This is a single letter from a-z that maps to the swatches included in your theme. By default, a checkbox 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>
|
||||
<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it 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='checkbox']").checkboxradio(<strong>{ theme: "a" }</strong>);</code></pre>
|
||||
</dd>
|
||||
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -34,8 +34,9 @@
|
|||
<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>
|
||||
|
||||
<p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
|
||||
<pre><code>
|
||||
$("input[type='radio']").bind( "change", function(event, ui) {
|
||||
...
|
||||
});
|
||||
|
|
@ -47,7 +48,7 @@ $("input[type='radio']").bind( "change", function(event, ui) {
|
|||
|
||||
<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({
|
||||
|
|
@ -74,7 +75,7 @@ $("input[type='radio']").checkboxradio({
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ $("input[type='radio']").attr("checked",true).checkboxradio("refresh");
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ $("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<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>
|
||||
<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it 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>
|
||||
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -34,9 +34,10 @@
|
|||
<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Since the native select menu is used as a proxy for the custom select, you can watch for events on the original, native select instead of needing to go through the select menu plugin. Bind to the change event by type: change, blur, focus, keypress, click, etc.</p>
|
||||
|
||||
<p>Bind events directly to the <code>select</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
|
||||
<pre><code>
|
||||
$( ".selector" ).bind( "change", function(event, ui) {
|
||||
$(".mySelect").bind( "change", function(event, ui) {
|
||||
...
|
||||
});
|
||||
</code></pre>
|
||||
|
|
@ -47,7 +48,6 @@ $( ".selector" ).bind( "change", function(event, ui) {
|
|||
|
||||
<dt><code>create</code> triggered when a select menu is created</dt>
|
||||
<dd>
|
||||
<p>This event is used to find out when a custom select was created. It is not used to create a custom select. The select create event can be used like this: </p>
|
||||
|
||||
<pre><code>
|
||||
$( ".selector" ).selectmenu({
|
||||
|
|
@ -74,7 +74,7 @@ $( ".selector" ).selectmenu({
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -451,7 +451,7 @@ $('select').selectmenu();
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ $('select').selectmenu('refresh', true);
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Bind events directly to the input element (the framework will automatically update the slider widget). Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
|
||||
<p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
|
||||
<pre><code>
|
||||
$( ".selector" ).bind( "change", function(event, ui) {
|
||||
...
|
||||
|
|
@ -73,7 +73,7 @@ $( ".selector" ).slider({
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li data-theme="a"><a href="index.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>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ $('input').slider();
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li data-theme="a"><a href="index.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>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ $('.selector').slider('refresh');
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li data-theme="a"><a href="index.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>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
<dt><code>initSelector</code> <em>CSS selector string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')"</p>
|
||||
<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as textinputs. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
|
||||
<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as sliders. To change which elements are initialized, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
|
||||
<pre><code>$( document ).bind( "mobileinit", function(){
|
||||
<strong>$.mobile.slider.prototype.options.initSelector = ".myslider";</strong>
|
||||
});
|
||||
|
|
@ -57,9 +57,8 @@
|
|||
<dt><code>theme</code> <em>string</em></dt>
|
||||
<dd>
|
||||
<p class="default">default: null, inherited from parent</p>
|
||||
<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme.</p>
|
||||
<p>Sets the color scheme (swatch) for all instances of this widget. It accepts a single letter from a-z that maps to the swatches included in your theme. By default, it 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>$('.selector').slider(<strong>{ theme: "a" }</strong>);</code></pre>
|
||||
<p>This option can be overridden in the markup by assigning a data attribute to the input, e.g. <code>data-theme="a"</code>.</p>
|
||||
</dd>
|
||||
|
||||
<dt><code>trackTheme</code> <em>string</em></dt>
|
||||
|
|
@ -87,7 +86,7 @@
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li><a href="../textinputs/index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li data-theme="a"><a href="index.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>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<li><a href="events.html" data-role="button" data-transition="fade" class="ui-btn-active">Events</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Bind events directly to the input element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
|
||||
<p>Bind events directly to the <code>input</code> element. Use jQuery Mobile's <a href="../../api/events.html">virtual events</a>, or bind standard JavaScript events, like change, focus, blur, etc.:</p>
|
||||
<pre><code>
|
||||
$( ".selector" ).bind( "change", function(event, ui) {
|
||||
...
|
||||
|
|
@ -72,7 +72,7 @@ $( ".selector" ).textinput({
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li data-theme="a"><a href="index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ $('input').textinput();
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li data-theme="a"><a href="index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ $('.selector').textinput('disable');
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li data-theme="a"><a href="index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
<li><a href="../docs-forms.html">Form basics</a></li>
|
||||
<li><a href="../forms-all.html">Form element gallery</a></li>
|
||||
<li data-theme="a"><a href="index.html">Text inputs</a></li>
|
||||
<li><a href="../forms-search.html">Search inputs</a></li>
|
||||
<li><a href="../search/index.html">Search inputs</a></li>
|
||||
<li><a href="../slider/index.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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue