jQuery easyUI中的EasyLoader的使用

最新推荐文章于 2020-05-25 08:38:53 发布

Jason_it学习分享

最新推荐文章于 2020-05-25 08:38:53 发布

阅读量2.5k

点赞数

分类专栏： jQuery easyUI 文章标签： jQuery easyUI EasyLoader

本文链接：https://blog.csdn.net/smilelifesky/article/details/44033873

版权

jQuery easyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery easyUI中的EasyLoader的使用

下面用一个简单的案例来介绍一下EasyLoader的使用：

1、首先创建一个web项目

2、到官网下载jQuery easyUI插件，并将其放到项目对应的包下：

3、将创建的项目部署到tomcat上或者是其他web服务器上

案例的实现截图：

案例相关代码：EasyLoader.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="<c:url value='/js/jquery-easyui-1.4.1/themes/gray/easyui.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/js/jquery-easyui-1.4.1/themes/icon.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/js/jquery-easyui-1.4.1/demo/demo.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/js/jquery-easyui-1.4.1/themes/default/easyui.css'/>"/>
<script type="text/javascript" src="<c:url value='/js/jquery-easyui-1.4.1/jquery.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/jquery-easyui-1.4.1/jquery.easyui.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/jquery-easyui-1.4.1/easyloader.js'/>"></script>
<script>
function load1(){
	using('calendar',function(){
		$('#cc').calendar({
			width:180,
			height:180
		});
	});
}
function load2(){
	using(['dialog','messager'],function(){
		$('#dd').dialog({
			title:'Dialog',
			width:300,
			height:200
		});
		$.messager.show({
			title:'info',
			msg:'dialog created'
		});
	});
}
</script>
</head>
<body>
<h1>EasyLoader</h1>
	<a href="#" class="easyui-linkbutton" οnclick="load1()">Load Calendar</a>
<span style="white-space:pre">	</span><a href="#" class="easyui-linkbutton" οnclick="load2()">Load Dialog</a>
	<div id="cc"></div>
	<div id="dd"></div>

</body>
</html>

项目部署成功之后，在地址栏输入相应的地址就可看到如上图的界面效果。