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>

<script type="text/javascript" src="jquery.easyui.min.js">
</script>

<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/

EasyUI jQuery switchbuttons widget

Explore