web项目怎么引入jquery EasyUI


本文摘自PHP中文网,作者coldplay.xixi,侵删。

web项目引入jquery EasyUI的方法:首先下载jQuery easyui插件;然后将相关文档考到项目的webapp下面;最后页面引入下面几个文件即可使用jquery easyui的的所有功能了。

本教程操作环境:windows7系统、jquery3.2.1&&web2.0版本,该方法适用于所有品牌电脑。

推荐:jquery视频教程

web项目引入jquery EasyUI的方法:

jQuery easyui是一个基于jquery的用户界面插件集合,可以做出各种炫酷页面效果,大中型项目都可以使用些框架,非常好用,而且它有中文网,提供了大量的demo.下面我们看怎么将它引入到项目中

一:下载地址

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

二:下载解压,将相关文档考到项目的webapp下面,因为它提供了说明文档,demo,这些不需要考到项目中

三:页面引入下面几个文件即可使用jquery easyui的的所有功能了

1

2

3

4

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

也可以将这个放到一个公共的页面中,因为所有页面都要引用这四句话。其它页面引用这个公共页面即可

1

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

实例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<%@ 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引入路径解释:jquery/jquery-1.8.3.min.js以当前页面test.jsp为坐标在当前文件夹中查找,由于test.jsp和jquery文件夹都在webroot目录下所以不需要

'/',如果加'/'意思是从项目根目录查找

相关免费学习推荐:js视频教程

以上就是web项目怎么引入jquery EasyUI的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

jquery ui与easyui的区别是什么

jquery easyui和bootstrap的区别是什么

web项目怎么引入jquery easyui

jqueryeasyui是啥?

jquery的easyui和layui区别是什么

layui和easyui有什么区别

jquery ui和easyui的区别是什么?

layui和easyui的区别是什么?

easyui和bootstrap之间有什么区别?

bootstrap和easyui区别

更多相关阅读请进入《引入jquery》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...