EasyUI jQuery switchbuttons widget
EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.
In this article, we will learn how to design switchbutton using jQuery EasyUI. Switchbutton has two parts: ‘on’ ‘off’. The user can click or tap to toggle the switch
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Syntax:
<div class="switchbutton"> </div>
Properties:
- width: The width of switchbutton
- height: The height of switchbutton
- handleWidth: The width of the center handle of switchbutton
- checked: Defines if the button is checked
- disabled: Defines if to disable the button
- readonly: Defines if the button is read-only
- reversed: Set to true the onText value and offText value will switch their positions
- onText: The text value of the left side.
- offText: The text value of the right side
- handleText: The text value of the center handle.
- value: The default value bound to the button.
Events:
- onChange: Fires when the checked value is changed
Methods:
- options: Return the options object
- resize: Resize the switchbutton
- disable: Disable the switchbutton
- enable: Enable the switchbutton
- readonly: Enable/Disable readonly mode
- check: Check the switchbutton
- uncheck: Uncheck the switchbutton
- clear: Clear the switchbutton’s ‘checked’ value
- reset: Reset the switchbutton’s ‘checked’ value
- setValue: Set the switchbutton value
CDN Link: First, add jQuery Easy UI scripts needed for your project.
<script type=”text/javascript” src=”jquery.min.js”>
</script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”>
</script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”>
</script>
Example 1:
HTML
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- EasyUI specific stylesheets--> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--jQuery libraries of EasyUI --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> <!--jQuery library of EasyUI Mobile --> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script> <script type="text/javascript"> $(document).ready(function (){ $('#gfg').switchbutton({ disabled: true }); }); </script></head><body> <h1>GeeksforGeeks</h1> <h3>EasyUI jQuery switchbutton widget</h3> <input id="gfg" class="easyui-switchbutton"></body></html> |
Output:
Reference: http://www.jeasyui.com/documentation/
Please Login to comment...