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>
项目部署成功之后,在地址栏输入相应的地址就可看到如上图的界面效果。