查看--> 全套EasyUI示例目录
11.Window窗口组件
注意
使用$.fn.window.defaults 重写默认值对象。
window 组件最强大的地方就是可以内部布局和添加 linkbutton。
具体布局方法如下：
1.外部用 window组件包裹一下；
2.内部用 layout 组件左右各分配一个，底部分配一个；
3.底部添加一个按钮即可。
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Window.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<%--使用class加载方式加载--%>
<%--<div class="easyui-window" title="my window" style="width:600px; height: 400px;"
data-options="iconCls:'icon-save',modal:true"
>
窗口
</div>--%>
<%-- <div id="box">
窗口
</div>--%>
<%--使用窗口进行布局--%>
<div class="easyui-window" style="width: 400px; height: 250px;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',width:100,split:true" >左</div>
<div data-options="region:'center',height:100,split:true,">中</div>
<div style="text-align: right" data-options="region:'south',height:40,split:true, border:false,">
<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'">确认</a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
</div>
</div>
</div>
</body>
</html>
JS文件
$(function () {
$("#box").window({
// ----------- 属性列表 ----------
width:300,
height:200,
title:"我的窗口",
iconCls:'icon-cut',
//设置是否为模态框
modal:true,
//是否可折叠，默认true，
// collapsible:false,
//是否可最小化，默认true，
// minimizable:false,
//是否可最大化，默认true，
// maximizable:false,
//是否可关闭，默认true，
// closable:false,
//初始化时是否处于关闭状态,默认为false，
// closed:false,
//z轴的坐标，即层叠的优先级，默认9000
zIndex:9000,
//定义是否可以拖动窗口
draggable:true,
//定义是否可以改变窗口大小
resizable:true,
//定义是否显示阴影效果
shadow:true,
//定义如何布局窗口，如果为true，窗口将显示在它的父容器中，否则将显示在所有元素之上
inline:false,
//-------------- 事件列表完全继承自panel面板 -----------------
});
//-------------- 方法列表 -------------
// console.log($("#box").window('window'));
// console.log($("#box").window('body'));
$(document).click(function () {
//仅水平居中
// $("#box").window('hcenter');
//仅垂直居中
// $("#box").window('vcenter');
//水平垂直同时居中
$("#box").window('center');
});
});
/**
使用$.fn.window.defaults 重写默认值对象。
window 组件最强大的地方就是可以内部布局和添加 linkbutton。
具体布局方法如下：
1.外部用 window组件包裹一下；
2.内部用 layout 组件左右各分配一个，底部分配一个；
3.底部添加一个按钮即可。
*/window效果图
布局效果图
------------------------------------------------
