1. Download of EasyUI
EasyUI official download address: http://www.jeasyui.com/download/index.php , the latest version is: jquery-easyui-1.5.4.2
After the download is completed, a compressed package of jquery-easyui-1.5.4.2 is obtained. After decompression, the following files are obtained in the obtained file:
2. Getting Started with EasyUI
EasyUI is using paradigm
1. Create a new JavaWeb project, and then add jquery-easyui-1.5.4.2, as shown in the following figure:
2. Then create a new 01.jsp page, built under the webapp, and use EasyUI in the 01.jsp page, the code is as follows:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>EasyUI Getting Started - Creating EasyUI Dialog</title>
<!-- Introduce JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.4.2/jquery.min.js"></script>
<!-- Introduce EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.4.2/jquery.easyui.min.js"></script>
<!-- Introduce the Chinese internationalization js of EasyUI, let EasyUI support Chinese -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.4.2/locale/easyui-lang-zh_CN.js"></script>
<!-- Introduce the style file of EasyUI-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.4.2/themes/default/easyui.css" type="text/css" />
<!-- Introduce the icon style file of EasyUI-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.4.2/themes/icon.css" type="text/css" />
<script type="text/javascript">
$(function(){
/* Steps to dynamically create EasyUI's Dialog using JavaScript:
1. Define a div and assign an ID to the div
2. Use the div in the JQuert selector, and then call the dialog() method to create an EasyUI Dialog
*/
$("#dd2").dialog();
//Create an Easy Dialog with custom parameters
$("#dd3").dialog({
title: 'Create Dialog with JavaScript',
width:400,
height:200,
closed:false,
cache:false,
modal:true
});
});
</script>
</head>
<body>
<!-- Steps to create EasyUI Dialog using pure html:
1. Define a div
2. Set the class style attribute of the div to easyui-dialog, so that the ordinary div can be programmed into the Dialog of EasyUI -->
<div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width:500px;height:300px">
Hello World!
</div>
<div id="dd2">Dialog Context</div>
<div id="dd3">Dialog Context</div>
</body>
</html>
3. Then deploy the project to tomcat, and access the jsp through the browser. The successful access interface is as follows:
