Open In App

jQuery EasyUI

Last Updated : 16 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

jQuery EasyUI Tutorial
EasyUI jQuery

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.

jQuery EasyUI Tutorial
EasyUI jQuery

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:

jQuery EasyUI Complete References


Similar Reads