EasyUI jQuery splitbutton widget

Last Updated : 23 Dec, 2021

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 splitbutton using jQuery EasyUI. Splitbutton is the part of drop-down menu. It is associated with a linkbutton and menu. The linkbutton is displayed while the menu is hidden.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

<div class="splitbutton">
</div>

Property:

  • duration: Duration in milliseconds to display menu when hovering on the button.
  • menu: A selector to create a corresponding menu.
  • plain: It's a boolean value to define the effect, default value is true to show plain effect.

Methods:

  • options: This method return the options object.
  • disable: It has been used to disable the splitbutton.
  • enable: It has been used to enable the splitbutton.
  • destroy: This method is used to destroy the splitbutton.

CDN Link: First, add jQuery Easy UI scripts needed for your project, links are local paths.

<script type="text/javascript" src="https://www.geeksforgeeks.org/jquery.min.js"> 
</script> 
<!--jQuery libraries of EasyUI --> 
<script type="text/javascript" 
 src="https://www.geeksforgeeks.org/jquery.easyui.min.js"> 
</script>   
<!--jQuery library of EasyUI Mobile --> 
<script type="text/javascript" 
 src="https://www.geeksforgeeks.org/jquery.easyui.mobile.js">   
</script> 
 

Example:

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').splitbutton({
          disabled: true
        }); 
      }); 
    </script> 
</head> 

<body>

    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery splitbutton widget</h3>
    <a id="gfg" class="easyui-splitbutton">Menu 1</a>

</body>
</html>

Output:

 

Reference: http://www.jeasyui.com/documentation/

Comment

Explore