Open In App

EasyUI jQuery menu widget

Last Updated : 31 Mar, 2021
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 a menu using jQuery EasyUI. The menu is usually used for context menus. It is the base component for building another menu component such as the menu button and split button. It also can be used for both navigation and executing commands.

Downloads for EasyUI for jQuery:

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

Syntax:

<div class="menu">
</div>

Properties:

  • zIndex: Menu z-index style, increase from it.
  • left: Menu left position.
  • top: Menu top position.
  • align: The menu alignment.
  • minWidth: The minimum width of the menu.
  • itemHeight: The menu item height.
  • duration: It defines duration time in milliseconds.
  • hideOnUnhover: When it is set to true, it automatically hides the menu when the mouse exits it.
  • inline: If it is set to true, it stays inside its parent, and goes on top of all elements when it is set to false.
  • fit: If it is set to true, it set the menu size.

Events:

  • onShow: Fires after the menu is shown.
  • onHide: Fires after the menu is hidden.
  • onClick: Fires when the menu item is clicked.

Methods:

  • options: Return the options object.
  • show: Show a menu in a specified position.
  • hide: Hide a menu.
  • destroy: Destroy a menu
  • getItem: Get the menu item properties that include a ‘target’ property indicating the item DOM element.
  • setText: Set the specified menu item text.
  • setIcon: Set the specified menu item icon.
  • findItem: Find the specified menu item.
  • appendItem: Append a new menu item.
  • removeItem: Remove the specified menu item.
  • enableItem: Enable the menu item.
  • disableItem: Disable the menu item.
  • showItem: Show the menu item.
  • hideItem: Hide the menu item.
  • resize: Resize the special menu.

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:

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').menu('show',{
              left: 50,
               top: 100
          }); 
      }); 
        </script
    </head
  
    <body>
  
        <h1>GeeksforGeeks</h1>
        <h3>EasyUI jQuery menu widget</h3>
  
    <div id="gfg" class="easyui-menu" style="width:120px;">
    <div>menu 1</div>
    <div>
        <span>menu 2</span>
        <div style="width:150px;">
            <div><b>Sub menu 1</b></div>
            <div>Sub menu 2</div>
            <div>Sub menu 3</div>
        </div>
    </div>
    <div>menu 3</div>
    <div class="menu-sep"></div>
    <div>menu 4</div>
    </div>
  
    </body>
    </html>


Output:

Menu widget

 

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



Previous Article
Next Article

Similar Reads

EasyUI jQuery Menu and Button Widget Complete Reference
The EasyUI jQuery has a collection of components for user-interface based on Angular, jQuery, React, and Vue, as it facilitates the necessary functionality for designing &amp; building interactive, modern javascript applications. By using the EasyUI in jQuery, we only need to design the user interface by writing some HTML markups &amp; need not wri
1 min read
How to design menu using jQuery EasyUI Mobile ?
In this article, we will learn how to design menu list using jQuery EasyUI Mobile plugin. EasyUI is a 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. Downloads for EasyUI for jQuery
2 min read
How to design menu on right click of webpage using jQuery EasyUI ?
EasyUI is a 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. It helps in building features for interactive web and mobile applications saving a lot of time for developers. Download
3 min read
EasyUI jQuery messager 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 a messager using jQuery EasyUI. messager widget provide different styles of
2 min read
EasyUI jQuery Form 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 form using jQuery EasyUI. Form provides various methods to perform actions
3 min read
EasyUI jQuery progressbar widget
In this article, we will learn how to design a progress bar widget using the jQuery Easy UI progress bar. The component can be created from HTML markup or programmatically. 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 mob
2 min read
EasyUI jQuery sidemenu 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 sidemenu using jQuery EasyUI. The sidemenu is used for context vertical me
2 min read
EasyUI jQuery tooltip widget
In this article, we will learn how to design a tooltip widget using jQuery EasyUI. 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. Download EasyUI for jQuery: https://
2 min read
EasyUI jQuery datalist 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 a datalist using jQuery EasyUI. A datalist renders items in a list. It is
2 min read
EasyUI jQuery Draggable widget
In this article, we will learn how to design a draggable widget using jQuery EasyUI. 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. The widget creates a draggable ele
3 min read