jQuery EasyUI

  • Last Updated : 23 Jun, 2022

EasyUI jQuery is an HTML5 framework for using user interface components based on jQuery. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Why EasyUI ?

EasyUI gives you the tools that you need to create modern and interactive JavaScript applications. You don’t need to write much JavaScript code while using EasyUI. Instead, you usually define the user interface by creating basic HTML markups. Each component of EasyUI has its own properties, methods, and events which can be easily extended to make web pages easily.

Steps to Install and use EasyUI: Follow the below steps to install and use jQuery EasyUI.

Step 1: Download the library from the below link:

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

Step 2: Add the following CSS and JavaScript files path into head section of your HTML code.

<link rel=”stylesheet” type=”text/css” href=”easyui/themes/default/easyui.css”>
<link rel=”stylesheet” type=”text/css” href=”easyui/themes/icon.css”>
<script type=”text/javascript” src=”easyui/jquery.min.js”></script>
<script type=”text/javascript” src=”easyui/jquery.easyui.min.js”></script>

Step 3: Now you can define an EasyUI component from markup or using JavaScript.

Let’s understand the working of EasyUI jQuery using an example.

Example: In this example, we will see how to design a menu button using the jQuery EasyUI menubutton widget.

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

<body>
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery menubutton widget</h3>

    <a id="gfg" class="easyui-menubutton">Menu 1</a>
</body>
  
</html>

Output:

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above

My Personal Notes arrow_drop_up