Easy UI jQuery Introduction

Easy UI 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.

Features:

We don’t need to write much javascript code while using Easy UI; instead, you usually define the user interface by creating basic HTML markups.
It provides essential functionality for developing modern javascript web applications.
It provides complete functionality for HTML5 webpages.
It has inbuilt components based on jquery core and HTML5 which can be used directly.

Declaration: There are two ways to declare UI components as described below:

Method 1: We can declare UI components directly within HTML as shown below. Here we are taking an example of EasyUI jQuery spinner Widget.

<div class="easyui-spinner" style="color: red;" data-options=" ">
    spinner content.
</div>

Method 2: We can also write javascript code to create components as shown below. Here we are taking an example of EasyUI jQuery spinner Widget.

<input id="cc" style="width:200px" />
<script type="text/javascript">
$(document).ready(function (){
    $('#gfg').spinner({
        required:true
    });
});
</script>

Installing Easy UI: Follow the below steps to install Easy UI for jQuery.

Step 1: Download the library from the link given below

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

Step 2: Include the following EasyUI CSS and JavaScript files on your page.

<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 Easy UI jQuery using an example.

Example: In this example, we will see how to design a spinner using the jQuery EasyUI spinner 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').spinner({ 

                required: true 

            }); 

        }); 

    </script> 

</head> 

<body> 

    <h1>GeeksforGeeks</h1> 

    <h3>EasyUI jQuery spinner widget</h3> 

    <input id="gfg" class="easyui-spinner"> 

</body> 

</html>

Output:

Article Tags :

JQuery

Web Technologies

EasyUI