jQuery easyUI中的EasyLoader的使用

浏览数：168 / 时间：2015年06月09日

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" onclick="load1()">Load Calendar</a>
<span style="white-space:pre">	</span><a href="#" class="easyui-linkbutton" onclick="load2()">Load Dialog</a>
	<div id="cc"></div>
	<div id="dd"></div>

</body>
</html>

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery easyUI中的EasyLoader的使用