Home > Article > Web Front-end > How to introduce jquery EasyUI into web projects
How to introduce jquery EasyUI into web projects
- coldplay.xixiOriginal
- 2020-12-21 10:37:272580browse
How to introduce jquery EasyUI into a web project: first download the jQuery easyui plug-in; then add the relevant documents to the project's webapp; finally, introduce the following files on the page to use all the functions of jquery easyui.
The operating environment of this tutorial: windows7 system, jquery3.2.1&&web2.0 version. This method is suitable for all brands of computers.
Recommended: jquery video tutorial
How to introduce jquery EasyUI into a web project:
jQuery easyui is a collection of user interface plug-ins based on jquery, which can create various cool page effects. Large and medium-sized projects can use some frameworks, which are very easy to use. Moreover, it has a Chinese website and provides a large number of demos. Let’s see how Introduce it into the project
1: Download address
http://www.jeasyui.com/download/index.PHP
2: Download and unzip the relevant The document is taken into account under the project's webapp, because it provides documentation and demos, which do not need to be taken into the project.
Three: You can use all the functions of jquery easyui by importing the following files into the page
<link rel="stylesheet" type="text/css" href="<c:url value="/themes/default/easyui.css"/>"> <link rel="stylesheet" type="text/css" href="<c:url value="/themes/icon.css"/>"> <script type="text/JavaScript" src="<c:url value="/jquery.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/jquery.easyui.min.js"/>"></script>
You can also put this on a public page, because all pages must quote these four sentences. Other pages can reference this public page
<%@ include file="./commonpage/easyuisupport.jsp" %>
Example:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP '01.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.2/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.2/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.2/themes/icon.css" type="text/css"/>
<script type="text/javascript">
$(function(){
//console.info($('#dd2'));
/*使用JavaScript动态创建EasyUI的Dialog的步骤：
1、定义一个div，并给div指定一个id
2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
*/
$('#dd2').dialog();//使用默认的参数创建EasyUI的Dialog
//使用自定义参数创建EasyUI的Dialog
$('#dd3').dialog({
title: '使用JavaScript创建的Dialog',
width: 400,
height: 200,
closed: false,
cache: false,
modal: true
});
});
</script>
</head>
<body>
This is my JSP page. <br>
<div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">
Hello World!
</div>
<div id="dd2">Dialog Content</div>
<div id="dd3">Dialog Content</div>
</body>
</html>ps: jquery introduction path explanation: jquery/jquery-1.8.3.min.js takes the current page test.jsp as the coordinate Search in the current folder. Since the test.jsp and jquery folders are both in the webroot directory, there is no need for
'/'. If you add '/', it means searching from the project root directory
Related free learning recommendations: js video tutorial
The above is the detailed content of How to introduce jquery EasyUI into web projects. For more information, please follow other related articles on the PHP Chinese website!