웹 프로젝트에 jquery EasyUI를 도입하는 방법-JS 튜토리얼-php.cn

웹 프로젝트에 jquery EasyUI를 도입하는 방법

coldplay.xixi

풀어 주다： 2020-12-21 10:38:28

원래의

2576명이 탐색했습니다.

웹 프로젝트에 jquery EasyUI를 도입하는 방법: 먼저 jQuery easyui 플러그인을 다운로드한 다음 프로젝트의 webapp에 관련 문서를 추가하고 마지막으로 페이지에 다음 파일을 도입하여 jquery easyui의 모든 기능을 사용하세요.

웹 프로젝트에 jquery EasyUI를 도입하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.2.1&&web2.0 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: jquery 비디오 튜토리얼

웹 프로젝트에 jquery EasyUI를 도입하는 방법:

jQuery easyui은 다양한 멋진 페이지 효과를 만들 수 있고 다음에서 사용할 수 있는 jquery 기반 사용자 인터페이스 플러그인 컬렉션입니다. 대형 및 중형 프로젝트 이 프레임워크는 사용하기 매우 쉽고, 데모를 많이 제공하는 중국 웹사이트가 있습니다. 프로젝트에 어떻게 도입하는지 살펴보겠습니다.

1: 다운로드 주소

http://www. jeasyui.com/download/index .PHP

두 번째: 프로젝트에 포함될 필요가 없는 문서와 데모를 제공하기 때문에 관련 문서를 다운로드하고 압축을 풀고 프로젝트의 웹앱에 추가하세요

세 번째: 소개 jquery easyui를 사용하려면 파일을 페이지로 이동하세요.

<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>

로그인 후 복사

의 모든 기능 모든 페이지는 이 네 문장을 인용해야 하기 때문에 공개 페이지에 넣을 수도 있습니다. 다른 페이지에서 이 공개 페이지를 참조할 수 있습니다.

<%@ include file="./commonpage/easyuisupport.jsp" %>

로그인 후 복사

예:

<%@ 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 &#39;01.jsp&#39; 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($(&#39;#dd2&#39;));
/*使用JavaScript动态创建EasyUI的Dialog的步骤：
1、定义一个div，并给div指定一个id
2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
*/
$(&#39;#dd2&#39;).dialog();//使用默认的参数创建EasyUI的Dialog
//使用自定义参数创建EasyUI的Dialog
$(&#39;#dd3&#39;).dialog({
title: &#39;使用JavaScript创建的Dialog&#39;,
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 소개 경로 설명: jquery/jquery-1.8.3.min.js는 현재 페이지 test.jsp를 좌표로 사용하여 현재 폴더에서 검색합니다. 왜냐하면 test.jsp와 jquery 폴더는 모두 webroot 디렉터리에 있으므로

'/'가 필요하지 않기 때문입니다. '/'를 추가하면 프로젝트 루트 디렉터리에서 검색한다는 뜻입니다.