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, Radio Button, RadioButton, CheckInput, RadioInput, Button" /> <meta name="description" content="This page represents the help documentation of the jqxRadioButton and jqxRadioButton widgets." /> <title>jqxRadioButton 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="properties"> <h2 class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Description </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>browser</span> </td> <td> <span>Returns information about the Browser.</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Returns an object with the following fields: <ul> <li>name - Browser Name. Possible values: "Internet Explorer", "Webkit", "Chrome", "Safari", "Opera", "Opera Mobile", "Dolphin", "Chrome Mobile", "webOSBrowser", "Silk", "Firefox".</li> <li>accessName - "msie", "webkit", "chrome", "safari", "opera", "operamobile", "dolphin", "chromemobile", "webosbrowser", "silk", "firefox".</li> <li>version - Browser Version.</li> <li>canvas - Boolean field which determines whether Canvas is supported.</li> <li>svg - Boolean field which determines whether SVG is supported.</li> <li>vml - Boolean field which determines whether VML is supported.</li> </ul> <h4>Code example</h4> Get the <code>browser</code> property. <pre><code> var response = new $.jqx.response(); var browser = response.browser; // gets the current browser's name. var name = browser.name; // gets the current browser's version. var version = browser.version; </code></pre> <p>Run code only for a specific browser</p> <pre><code> var response = new $.jqx.response(); var browser = response.browser; if (browser.msie) { // add code specific for Internet Explorer. if (browser.version == 7) { // add code specific for Internet Explorer 7 } } else if (browser.firefox) { // add code specific for Firefox } </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Luu4C/">browser is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>device</span> </td> <td> <span>Returns information about the Device.</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Returns an object with the following fields: <ul> <li>type - Device Type. Possible values: "Desktop", "Tablet", "Phone".</li> <li>touch - Boolean field which determines whether the device is touch enabled.</li> <li>width - screen width.</li> <li>height - screen height.</li> <li>availWidth - screen's usable width.</li> <li>availHeight - screen's usable height i.e minus UI headers and/or footers.</li> </ul> *Device size is static and does not change when the page is resized or rotated. <h4>Code example</h4> Get the <code>device</code> property. <pre><code> var response = new $.jqx.response(); var device = response.device; var type = device.type; var isTouchDevice = device.touch; var screenWidth = device.width; var screenHeight = device.height; </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xW8fX/">device is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>document</span> </td> <td> <span>Returns information about the document.</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Returns an object with the following fields: <ul> <li>width - document's width.</li> <li>height - document's height.</li> </ul> *document's size changes when the page is resized. <h4>Code example</h4> Get the <code>document</code> property. <pre><code> var response = new $.jqx.response(); var document = response.document; var width = document.width; var height = document.height; </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tMZDL/">document is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span13'>destroy</span> </td> <td> <span>Destroys the plug-in. </span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <h4>Code example</h4> <pre><code> var response = new $.jqx.response(); response.destroy(); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/V7J9R/">destroy is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>resize</span> </td> <td> <span>Callback function or functions called when the browser's window is resized.</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <h4>Code example</h4> <pre><code> var response = new $.jqx.response(); response.resize(function (event) { // your code here. }); </code></pre> <h4>Code example with multiple callbacks</h4> <pre> <code> var response = new $.jqx.response(); var resizeFunction1 = function () { console.log("resizeFunction1 is called"); } var resizeFunction2 = function () { console.log("resizeFunction2 is called"); } response.resize([resizeFunction1, resizeFunction2]); </code> </pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/W5wsX/">resize is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>isHidden</span> </td> <td> <span>Checks whether a HTML Element is hidden. </span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> The function accepts HTML Element as parameter and returns true, if the element is hidden or false if not. <h4>Code example</h4> <pre><code> var response = new $.jqx.response(); var hidden = response.isHidden($("#someID")[0]); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dyuLA/">isHidden is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>inViewPort</span> </td> <td> <span>Checks whether a HTML Element is in the view port. </span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> The function accepts HTML Element as parameter and returns true, if the element is in the view port or false if not. <h4>Code example</h4> <pre><code> var response = new $.jqx.response(); var inViewPort = response.inViewPort($("#someID")[0]); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CuKFC/">inViewPort is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='property-name-disabled'>os</span> </td> <td> <span>Returns information about the OS.</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Returns an object with the following fields: <ul> <li>name - OS Name. Possible values: "iOS", "Android", "webOS", "BlackBerry", "RIMTablet", "MacOS", "Windows", "Linux", "Bada".</li> <li>version - OS Version.</li> <li>platform - OS Platform.</li> </ul> <h4>Code example</h4> Get the <code>os</code> property. <pre><code> var response = new $.jqx.response(); var os = response.os; </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Rymgz/">os is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>pointerDown</span> </td> <td> <span>Event handler for mouse and touch events that works across browsers. "pointerDown" automatically handles the "mousedown", "MSPointerDown" and "touchstart" events on an element and calls a callback function with 3 parameters(original event, pointer position and pointer type). </span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> The function has 2 parameters: <ul> <li>HTML Element - the element that will receive events.</li> <li>Callback function that is called when the mouse pointer is over the element and the mouse button is pressed or a contact touches the screen on element. <ul> <li>event - the original Event object.</li> <li>position - object with the following fields: <ul> <li>left - X position relative to the top-left edge of the document.</li> <li>top - Y position relative to the top-left edge of the document.</li> </ul> </li> <li>pointerType - the pointer's type - "touch" or "mouse".</li> </ul> </li> </ul> <h4>Code example</h4> <pre><code> var response = new $.jqx.response(); response.pointerDown($(document), function (event, position, pointerType) { }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6NhSJ/">pointerDown is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>pointerMove</span> </td> <td> <span>Event handler for mouse and touch events that works across browsers. "pointerMove" automatically handles the "mousemove", "MSPointerMove" and "touchmove" events on an element and calls a callback function with 3 parameters(original event, pointer position and pointer type). </span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> The function has 2 parameters: <ul> <li>HTML Element - the element that will receive events.</li> <li>Callback function that is called when the mouse pointer is over the element and is moved or a contact moves on the screen while over an element. <ul> <li>event - the original Event object.</li> <li>position - object with the following fields: <ul> <li>left - X position relative to the top-left edge of the document.</li> <li>top - Y position relative to the top-left edge of the document.</li> </ul> </li> <li>pointerType - the pointer's type - "touch" or "mouse".</li> </ul> </li> </ul> <h4>Code example</h4> <pre><code> var response = new $.jqx.response(); response.pointerMove($(document), function (event, position, pointerType) { }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fYzw6/">pointerMove is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>pointerUp</span> </td> <td> <span>Event handler for mouse and touch events that works across browsers. "pointerUp" automatically handles the "mouseup", "MSPointerUp" and "touchend" events on an element and calls a callback function with 3 parameters(original event, pointer position and pointer type). </span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> The function has 2 parameters: <ul> <li>HTML Element - the element that will receive events.</li> <li>Callback function that is called when the mouse pointer is over the element and the mouse button is released or a contact is raised off of the screen over an element. <ul> <li>event - the original Event object.</li> <li>position - object with the following fields: <ul> <li>left - X position relative to the top-left edge of the document.</li> <li>top - Y position relative to the top-left edge of the document.</li> </ul> </li> <li>pointerType - the pointer's type - "touch" or "mouse".</li> </ul> </li> </ul> <h4>Code example</h4> <pre><code> var response = new $.jqx.response(); response.pointerUp($(document), function (event, position, pointerType) { }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/g6bYY/">pointerUp is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>refresh</span> </td> <td> <span>Refreshes the plug-in properties. </span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <h4>Code example</h4> <pre><code> var response = new $.jqx.response(); response.refresh(); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jwjpY/">refresh is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span14'>responsive</span> </td> <td> <span>Responsive Grid System.</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> The method argument is an object with the following fields: <ul> <li><code>container</code> - "#id", ".className" or jQuery Selector. Defines the Container element of the Grid layout.</li> <li><code>colWidths</code> - Array which defines the column widths as a proportion of the container's width.</li> <li><code>colOffsets</code> - Array which defines the column left offsets as a proportion of the container's width.</li> <li><code>colClass</code> - String which defines the CSS class which is added to each column.</li> <li><code>deviceTypes</code> - String which defines for which device types the breakpoints of the Grid layout will be taken into account. Possible values are: "Desktop", "Tablet" and "Phone". For example if the property is set to "Tablet, Phone", the breakpoints will hit only for these device types.</li> <li><code>margin</code> - Object with <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> members which define the margin of each cell in the Grid layout.</li> <li><code>padding</code> - Object with <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> members which define the padding of each cell in the Grid layout.</li> <li><code>breakpoints</code> - Array of Objects. Each object in the array defines a breakpoint. The breakpoint has <code>width</code> property which defines the width under which the breakpoint's <code>colWidths</code>, <code>colOffsets</code>, <code>colClass</code>, <code>margin</code> and <code>padding</code> properties will be taken into account.</li> </ul> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/k3nbeL5d/">responsive grid system is created</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>scroll</span> </td> <td> <span>Returns information about the Scrollbars position.</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Returns an object with the following fields: <ul> <li>left - horizontal scrollbar's position.</li> <li>top - vertical scrollbar's position.</li> </ul> <h4>Code example</h4> Get the <code>scroll</code> property. <pre><code> var response = new $.jqx.response(); var scroll = response.scroll; var left = scroll.left; var top = scroll.top; </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Pk73P/">scroll is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>viewPort</span> </td> <td> <span>Returns information about the view port.</span> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> Returns an object with the following fields: <ul> <li>width - view port's width.</li> <li>height - view port's height.</li> </ul> *viewPort's size changes when the page is resized. <h4>Code example</h4> Get the <code>viewPort</code> property. <pre><code> var response = new $.jqx.response(); var viewPort = response.viewPort; var width = viewPort.width; var height = viewPort.height; </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wTdtP/">viewPort is set to a custom function</a> </div> </div> </td> </tr> </table> <br /> </div> </body> </html>