pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!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="${ctx }/resource/css/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx }/resource/css/icon.css">
<script type="text/javascript" src="${ctx }/resource/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx }/resource/js/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-window"></div>
</body>
</html>
要使用easyui框架,要引入2个css文件,2个js包.jquery要放在easyui js包之前.
window框,新建一个窗口.
静态方式
<div id="win" class="easyui-window" title="my Window"
data-options="width:400,height:300,closable:false"
></div>
<input type="button" value="改变标题" onclick="changeIt()">
<input type="button" value="关闭窗口" onclick="closeIt()">
<input type="button" value="打开窗口" onclick="openIt()">
<input type="button" value="改变大小" onclick="resizeIt()">
添加一个class属性,通过data-options进行设置
js方式
$(function(){
$("#win").window({
width:400,
height:300,
top:20,
left:15,
closable:true,
content:"这是一个窗口",
//modal:true,
onBeforeClose:function(){
alert("我不能关");
return false;
}
})
})
常用方法 通过外界调用window自身方法
function changeIt(){
$("#win").window("setTitle","嘿嘿嘿");
}
//关闭窗口
function closeIt(){
$("#win").window("close",true)
}
//打开窗口
function openIt(){
$("#win").window("open",true);
}
//改变大小
function resizeIt(){
$("#win").window("resize",{
width:400,
height:400
});
}