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 all the required pre-compiled files from the official website and save it in your working folder. Please take care of proper file paths during code implementation.
Official website for jQuery EasyUI:
https://www.jeasyui.com/index.php
Example 1: The following code demonstrates the design of the basic user form using jQuery EasyUI framework.
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="demo.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> </head> <body> <h2>jQuery EasyUI basic user form</h2> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;"> <form id="formID" method="post"> <!-- Set class to form-floating-label for special labels--> <div class="form-floating-label form-field" style="margin-bottom:20px"> <!-- easyui-textbox class is used --> <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:', required:true, labelPosition:'top'"> </div> <!-- set the data-options for HTML validation --> <div class="form-floating-label form-field" style="margin-bottom:20px"> <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email ID:', required:true,validType:'email', labelPosition:'top'"> </div> <div class="form-floating-label form-field" style="margin-bottom:20px"> <!--set multiline to true for textarea--> <input class="easyui-textbox" name="message" style="width:100%;height:60px" data-options="label:'Message:', multiline:true, labelPosition:'top'"> </div> <div class="form-floating-label form-field" style="margin-bottom:20px"> <select class="easyui-combobox" name="language" style="width:100%" data-options="label:'Language:', labelPosition:'top'"> <option value="ar">Arabic</option> <option value="nl">Dutch</option> <option value="en" selected="selected"> English</option> <option value="fr">French</option> <option value="de">German</option> <option value="el">Greek</option> <option value="hi">Hindi</option> <option value="ja">Japanese</option> <option value="ko">Korean</option> </select> </div> </form> <div style="text-align:center;padding:5px 0"> <!--To create link using EasyUI --> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px"> Submit </a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px"> Reset </a> </div> </div> <script> // Submit the form function submitForm(){ $('#formID').form('submit'); } // Reset the form function clearForm(){ $('#formID').form('clear'); } </script> </body> </html> |
Output:
- Before execution:
- After execution:
Example 2: The following code demonstrates loading form data from the current local file and remote JSON file.
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="demo.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> </head> <body> <h2> jQuery EasyUI load user form data </h2> <div class="easyui-panel" style="width:100%;max-width:400px; padding:30px 60px;"> <form id="formID" method="post"> <!--Set class to form-floating-label for special labels--> <div class="form-floating-label form-field" style="margin-bottom:20px"> <!--easyui-textbox class is used--> <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:', required:true,labelPosition:'top'"> </div> <!--set the data-options for HTML validation --> <div class="form-floating-label form-field" style="margin-bottom:20px"> <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email ID:', required:true,validType:'email', labelPosition:'top'"> </div> <div class="form-floating-label form-field" style="margin-bottom:20px"> <!--set multiline to true for textarea--> <input class="easyui-textbox" name="message" style="width:100%;height:60px" data-options="label:'Message:',multiline:true, labelPosition:'top'"> </div> <div class="form-floating-label form-field" style="margin-bottom:20px"> <select class="easyui-combobox" name="language" style="width:100%" data-options="label:'Language:', labelPosition:'top'"> <option value="ar">Arabic</option> <option value="nl">Dutch</option> <option value="en" selected="selected"> English</option> <option value="fr">French</option> <option value="de">German</option> <option value="el">Greek</option> <option value="hi">Hindi</option> <option value="ja">Japanese</option> <option value="ko">Korean</option> </select> </div> </form> <div style="text-align:center;padding:5px 0"> <!-- To create link using EasyUI --> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()"> Reset </a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadData()"> Load Data </a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadRemoteData()"> LoadRemote </a> </div> </div> <script> // Reset the form function clearForm(){ $('#formID').form('clear'); } // Load data function loadData(){ $('#formID').form('load',{ name:'Sahil', email:'sahil@gmail.com', message:'hello GFG', language:'en' }); } // Load remote json file data function loadRemoteData(){ $('#formID').form('load','form-data.json'); } </script> </body> </html> |
form-data.json: The following is the data for file “form-data.json” which is used in the above code.
{
"name":"sandeep",
"email":"sandeep@gmail.com",
"message":"Hello GFG",
"language":"hi"
}
Output:
Example 3: The following code shows how to enable validation using the jQuery EasyUI plugin.
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="demo.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> </head> <body> <h2> jQuery EasyUI load user form data </h2> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;"> <!--set novalidate to true in data-options--> <form id="formID" method="post" data-options="novalidate:true"> <!--set class to form-floating-label for special labels--> <div class="form-floating-label form-field" style="margin-bottom:20px"> <!--easyui-textbox class is used --> <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:', required:true,labelPosition:'top'"> </div> <!--set the data-options for HTML validation --> <div class="form-floating-label form-field" style="margin-bottom:20px"> <input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email ID:', required:true,validType:'email', labelPosition:'top'"> </div> </form> <div style="text-align:center;padding:5px 0"> <!--To create link using EasyUI --> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()"> Submit </a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()"> Reset </a> </div> </div> <script> // submit the form function submitForm(){ $('#formID').form('submit',{ onSubmit:function(){ return $(this) .form('enableValidation') .form('validate'); } }); } // Reset the form function clearForm(){ $('#formID').form('clear'); } </script> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
