jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <meta name="keywords" content="jQuery, switch button, Radio Button, RadioButton, CheckInput, RadioInput, Button" /> <meta name="description" content="This page represents the help documentation of the jqxSwitchButton and jqxRadioButton widgets." /> <title>jqxSwitchButton and jqxRadioButton API Reference</title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="switchbutton"> <div style="margin: 5px;" id="properties2"> <h2 style="text-align: left;" class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Type </th> <th>Default </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>checked</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the check state. </p> <h4>Code examples</h4> <p> Set the <code>checked</code> property. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ checked:true }); </code></pre> <p> Get the <code>checked</code> property. </p> <pre><code>var checked = $('#jqxSwitchButton').jqxSwitchButton('checked');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ecrvd/">checked is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>disabled</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the switch button is disabled. </p> <h4>Code examples</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ disabled:true }); </code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxSwitchButton').jqxSwitchButton('disabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/E5pw9/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>height</span> </td> <td> <span>Number/String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the height. </p> <h4>Code examples</h4> <p> Set the <code>height</code> property . </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton({height:"400px"});</code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxSwitchButton').jqxSwitchButton('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Zg4cX/">height is set to 30</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>orientation</span> </td> <td> <span>String</span> </td> <td>'horizontal' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines the jqxSwitchButton's orientation. </p> <b>Possible Values:</b> <br /> <pre><code>'horizontal' </code></pre> <pre><code>'vertical'</code></pre> <h4>Code examples</h4> <p> Set the <code>orientation</code> property. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ orientation:vertical }); </code></pre> <p> Get the <code>orientation</code> property. </p> <pre><code>var orientation = $('#jqxSwitchButton').jqxSwitchButton('orientation');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bj3YP/">orientation is set to 'vertical'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>onLabel</span> </td> <td> <span>String</span> </td> <td>'On' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the string displayed when the button is checked. </p> <h4>Code examples</h4> <p> Set the <code>onLabel</code> property. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ onLabel:'ON' }); </code></pre> <p> Get the <code>onLabel</code> property. </p> <pre><code>var onLabel = $('#jqxSwitchButton').jqxSwitchButton('onLabel');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5ge3D/">onLabel is set to 'On'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>offLabel</span> </td> <td> <span>String</span> </td> <td>'Off' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the string displayed when the button is unchecked. </p> <h4>Code examples</h4> <p> Set the <code>offLabel</code> property. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ offLabel:'OFF' }); </code></pre> <p> Get the <code>offLabel</code> property. </p> <pre><code>var offLabel = $('#jqxSwitchButton').jqxSwitchButton('offLabel');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/R3D5t/">offLabel is set to 'Off'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>thumbSize</span> </td> <td> <span>String</span> </td> <td>'40%' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the size of the thumb in percentages. </p> <h4>Code examples</h4> <p> Set the <code>thumbSize</code> property. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ thumbSize:'50%' }); </code></pre> <p> Get the <code>thumbSize</code> property. </p> <pre><code>var thumbSize = $('#jqxSwitchButton').jqxSwitchButton('thumbSize');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2rFLw/">thumbSize is set to '30%'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span21'>width</span> </td> <td> <span>Number/String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the width. </p> <h4>Code examples</h4> <p> Set the <code>width</code> property. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton({width:"200px"});</code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxSwitchButton').jqxSwitchButton('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jfJwq/">width is set to 80</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Events</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span13'>checked</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the switch button is checked. </p> <h4>Code examples</h4> <p> Bind to the <code>checked</code> event by type: jqxSwitchButton. </p> <pre><code>$('#jqxSwitchButton').on('checked', function (event) { // Some code here.}); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2bU8L/">Bind to the checked event by type: jqxSwitchButton</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span15'>change</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the switch button's state changes from one state to another. </p> <h4>Code examples</h4> <p> Bind to the <code>change</code> event by type: jqxSwitchButton. </p> <pre><code>$('#jqxSwitchButton').on('change', function (event) { // Some code here.}); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6VbfW/">Bind to the change event by type: jqxSwitchButton</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span14'>unchecked</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the switch button is unchecked. </p> <h4>Code examples</h4> <p> Bind to the <code>unchecked</code> event by type: jqxSwitchButton. </p> <pre><code>$('#jqxSwitchButton').on('unchecked', function (event) { // Some code here.}); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Pv4Kf/">Bind to the unchecked event by type: jqxSwitchButton</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Methods</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span16'>check</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Checks the button. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example</h4> <p> Invoke the <code>check</code> method. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton('check');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/k9d5B/">checks the jqxSwitchButton</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span19'>disable</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Disables the switch button. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example</h4> <p> Invoke the <code>disable</code> method. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton('disable');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fRKg8/">disable the jqxSwitchButton</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span20'>enable</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Enables the switch button. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example</h4> <p> Invoke the <code>enable</code> method. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton('enable');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DnYEn/">enables the jqxSwitchButton</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span18'>toggle</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Toggles the check state. This method is automatically called when the user clicks the switch button. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example</h4> <p> Invoke the <code>toggle</code> method. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton('toggle');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Cnp9K/">toggles the jqxSwitchButton</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span17'>uncheck</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Unchecks the button. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code example</h4> <p> Invoke the <code>uncheck</code> method. </p> <pre><code>$('#jqxSwitchButton').jqxSwitchButton('uncheck');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/guWgQ/">unchecks the jqxSwitchButton</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span59'>val</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the value. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>value(optional)</em></td> <td>Boolean</td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>Boolean</em> </div> <h4>Code example</h4> <p> Invoke the <code>val</code> method. </p> // Get the value. <pre><code>var value = $("#jqxSwitchButton").jqxSwitchButton('val');</code></pre> // Get the value using jQuery's val() <pre><code>var value = $("#jqxSwitchButton").val();</code></pre> // Set value. <pre><code>$("#jqxSwitchButton").jqxSwitchButton('val', true);</code></pre> // Set value using jQuery's val(). <pre><code>$("#jqxSwitchButton").val(true);</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LM3aX/">sets the value of the jqxSwitchButton</a> </div> </div> </td> </tr> </table> <br /> </div> </div> </body> </html>