Open In App

EasyUI jQuery switchbuttons widget

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 21 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads