您的位置是:网站首页>Javascript编程Javascript编程

web项目怎么引入jquery EasyUI

少儿编程网2021-02-23 16:26:42Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介web项目引入jqueryEasyUI的方法:首先下载jQueryeasyui插件;然后将相关文档考到项目的webapp下面;最后页面引入下面几个文件即可使用jqueryeasyui的的所有功能了。本教程操作环境:windows7系统、jquery3.2.1&&web2.0版本,该方

web项目引入jquery EasyUI的方法:首先下载jQuery easyui插件;然后将相关文档考到项目的webapp下面;**后页面引入下面几个文件即可使用jquery easyui的的所有功能了。4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

本教程操作环境:windows7系统、jquery3.2.1&&web2.0版本,该方法适用于所有品牌电脑。4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

推荐:jquery视频教程4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

web项目引入jquery EasyUI的方法:4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

jQuery easyui是一个基于jquery的用户界面插件集合,可以做出各种炫酷页面效果,大中型项目都可以使用些框架,非常好用,而且它有中文网,提供了大量的demo.下面我们看怎么将它引入到项目中4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

一:下载地址4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

http://www.jeasyui.com/download/index.PHP4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

二:下载解压,将相关文档考到项目的webapp下面,因为它提供了说明文档,demo,这些不需要考到项目中4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

三:页面引入下面几个文件即可使用jquery easyui的的所有功能了4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

也可以将这个放到一个公共的页面中,因为所有页面都要引用这四句话。其它页面引用这个公共页面即可4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

实例:4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<%@ 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目录下所以不需要4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

'/',如果加'/'意思是从项目根目录查找4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

相关免费学习推荐:js视频教程4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

以上就是web项目怎么引入jquery EasyUI的详细内容,更多请关注少儿编程网其它相关文章!4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网4Ms少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

web项目怎么引入jquery EasyUI

      匿名评论
    • 评论
    人参与,条评论
    web项目怎么引入jquery EasyUI

微信公众号

免费视频教程

先知道