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

一：下载地址

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

二：下载解压，将下面红圈中的考到项目的webapp下面，因为它提供了说明文档，demo，这些不需要考到项目中

三：页面引入下面几个文件即可使用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" %>

来源：http://blog.csdn.net/whh743/article/details/53809793

实例：

<%@ 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目录下所以不需要

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

参考：http://blog.csdn.net/luofeixiongsix/article/details/49882925

web项目中引入jquery easyui的更多相关文章

  1. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  2. 在Web工程中引入Jquery插件报错解决方案

    在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方 ...

  3. java web项目中引入spring

    自己动手实践了一次,发生中间出了一下问题,现整理出来,供参考. Step1: 新建一个java web项目 Step2:下载spring的jar包http://repo.spring.io/libs- ...

  4. vue-cli3.0以上项目中引入jquery的方法

    这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...

  5. Angular项目中引入jQuery

    npm install --save jquery npm install @types/jquery --save 在对应的组件中引入 import * as $ from "jquery ...

  6. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  7. vue-cli3项目中引入jquery 以及如何引进bootstrap

    1.安装jquery npm install jquery --save 2.或则在package.json中指定版本号,然后运行npm install命令 "dependencies&qu ...

  8. 非WEB项目中引入Hibernate Validator

    前言: 网上一些朋友分享了关于hibernate-validator的使用方法,但是不是缺少关联库信息,就是提供的参考代码中缺少自定类. 希望我这一篇博客能够让你顺利的跑出预期的结果. 如果有错,可以 ...

  9. Java项目在jsp页面中引入jquery框架的步骤

    环境:在Java  web项目中引入juqery框架 工具:MyEclipse8.5 [步骤如下] A:新建一个Java web项目TestJquery,在WebRoot目录下创建一个jquery文件 ...

随机推荐

  1. MySQL批量插入大量数据方法

    在MySQL数据库中,如果要插入上百万级的记录,用普通的insert into来操作非常不现实,速度慢人力成本高,推荐使用Load Data或存储过程来导入数据,我总结了一些方法分享如下,主要基于My ...

  2. JZOJ 5773. 【NOIP2008模拟】简单数学题

    5773. [NOIP2008模拟]简单数学题 (File IO): input:math.in output:math.out Time Limits: 1000 ms  Memory Limits ...

  3. UML类图关系模式(C++代码说明)

    在UML类图中的关系模式主要有以下几种: 泛化(Generalization),  实现(Realization), 关联(Association), 聚合(Aggregation), 依赖(Depe ...

  4. 江西理工大学编程俱乐部 2328 Star

    : Star 时间限制: C/C++ s Java/Python s 内存限制: MB 答案正确: 提交: 题目描述 31世纪,人类世界的科技已经发展到了空前的高度,星际移民,星际旅游早已经不再是问题 ...

  5. V4L2学习（四）VIVI分析

    vivi 相对于后面要分析的 usb 摄像头驱动程序,它没有真正的硬件相关层的操作,也就是说抛开了复杂的 usb 层的相关知识,便于理解 V4L2 驱动框架,侧重于驱动和应用的交互. 前面我们提到,V ...

  6. poj 3308 Paratroopers（二分图最小点权覆盖）

    Paratroopers Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8954   Accepted: 2702 Desc ...

  7. MFC深入浅出读书笔记第二部分2

    第七章  MFC骨干程序 所谓骨干程序就是指有AppWizard生成的MFC程序.如下图的层次关系是程序中常用的几个类,一定要熟记于心. 1 Document/View应用程序 CDocument存放 ...

  8. CSU-2172 买一送一

    CSU-2172 买一送一 Description ICPCCamp 有 n 个商店,用 1, 2, -, n 编号.对于任意 i > 1,有从商店 \(p_i\) 到 i 的单向道路. 同时, ...

  9. JAVA作业一

    public class java1 { /** * @param args */ public static void main(String[] args) { // TODO Auto-gene ...

  10. PAT1039

    小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要的珠子?如果是,那么告诉她有多少多余的珠子 ...