Horje
jQuery EasyUI

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

 


Reffered: https://www.geeksforgeeks.org

JQuery

Related
jQuery UI jQuery UI
jQuery Examples jQuery Examples
Create Searchable Dropdown Select With jQuery Create Searchable Dropdown Select With jQuery
Age Range Validator using JQuery Age Range Validator using JQuery
How to use JSON in Ajax jQuery ? How to use JSON in Ajax jQuery ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 20



 

Horje