微信公众号：程序yuan
7.Panel面板组件
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/Panel.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<%--class加载方式--%>
<%--
<div class="easyui-panel" data-options="closable:true," title="My Panel" style="width: 500px;">
<p>内容部分</p>
</div>
--%>
<button id="btn1">销毁面板</button>
<button id="btn2">打开面板</button>
<button id="btn3">关闭面板</button>
<button id="btn4">刷新面板</button>
<button id="btn5">重新设置大小</button>
<button id="btn6">移动面板</button>
<button id="btn7">最大化面板</button>
<button id="btn8">最小化面板</button>
<button id="btn9">从最大化恢复</button>
<button id="btn10">折叠面板主体</button>
<button id="btn11">展开面板主体</button>
<div id="box">
<p>内容部分</p>
</div>
<div id="selector">
<a class="icon-add" onclick="javascript:alert('add')"></a>
<a class="icon-edit" onclick="javascript:alert('edit')"></a>
<a class="icon-cut" onclick="javascript:alert('cut')"></a>
</div>
</body>
</html>
JS文件
$(function () {
$("#box").panel({
//----------- 属性列表 ---------------
//设置id值
// id:'panel',
width:400,
height:300,
title:"我的面板",
iconCls:'icon-search',
// left:200,
// top:200,
//可以进行自定义css的设置，但是可能会涉及到优先级的问题
cls:'a',
headerCls:'b',
bodyCls:'c',
style:{
//设置背景颜色没有效果
// background:'red',
// 不起作用
// 'min-height':'500px',
},
//自适应
// fit:true,
//是否显示面板边框，默认为true，
border:true,
//在面板创建时是否重新载入属性，默认为true，
doSize:true,
//设置是否不显示头部区域，默认false，
noheader:false,
content:"设置面板内容",
//设置面板是否可以折叠
collapsible:true,
//设置面板是否可以最小化
minimizable:true,
//设置面板是否可以最大化
maximizable:true,
//设置面板是否可以有关闭按钮
closable:true,
//数组方式
tools:[
{
iconCls:'icon-save',
handler:function () {
alert("保存");
}
},{
iconCls:'icon-help',
handler:function () {
alert('帮助');
}
}
],
/*//使用选择器的方式
tools:"#selector",*/
//定义在初始化时是否折叠面板，默认为false，
collapsed:false,
//定义在初始化时是否最小化面板，默认为false，
minimized:false,
//定义在初始化时是否最大化面板，默认为false，
maximized:false,
//定义在初始化时是否关闭面板，默认为false，
closed:false,
//从URL读取远程数据并且显示到面板。默认为null，
href:'http://localhost:8081/easyui/getUsers.action',
// cache:true,
loadingMessage:"正在努力加载中...",
//可以对加载过来的数据进行过滤
extractor:function (data) {
// alert(data);
// return data.substring(1,10);
return data;
},
//------------- 事件列表 ------------------
// (带Before的都可以return false)
onBeforeLoad:function () {
// alert("在加载远程数据之前触发");
},
onLoad:function () {
// alert("在加载数据之后触发");
},
onBeforeOpen:function () {
// alert("在打开面板之前触发");
},
onOpen:function () {
// alert("在打开面板之后触发");
},
onBeforeClose:function () {
// alert("在关闭面板之后触发");
},
onClose:function () {
// alert("在关闭面板之后触发");
},
onBeforeDestroy:function () {
// alert("在销毁面板之前触发");
},
onDestroy:function () {
// alert("在销毁面板之后触发");
},
onBeforeCollapse:function () {
// alert("在折叠之前触发");
},
onCollapse:function () {
// alert("在折叠过程中触发");
},
onBeforeExpand:function () {
// alert("在展开前触发");
},
onExpand:function () {
// alert("在展开过程中触发");
},
onResize:function (width,height) {
alert("width:"+width+", height:"+height);
},
onMove:function (left,top) {
alert("left:"+left+", top:"+top);
},
onMaximize:function () {
// alert("窗口最大化后触发");
},
onRestore:function () {
// alert("在窗口恢复原始大小之后触发");
},
onMinimize:function () {
// alert("在窗口最小化后触发");
}
});
//属性设置left和top需要设置定位方式
$("#box").panel('panel').css('position','absolute');
//--------------- 方法列表 ------------------
//返回属性对象
console.log($("#box").panel('options'));
//返回面板对象
console.log($("#box").panel('panel'));
//返回header头部对象
console.log($("#box").panel('header'));
//返回body对象
console.log($("#box").panel('body'));
//设置面板标题
$("#box").panel('setTitle','myTitle');
$("#btn1").click(function () {
$("#box").panel('destroy');//执行onBeforeDestroy
// $("#box").panel('destroy',true);//不执行onBeforeDestroy
});
$("#btn2").click(function () {
// $("#box").panel('open');//执行onBeforeOpen
$("#box").panel('open',true);//不执行onBeforeOpen
});
$("#btn3").click(function () {
// $("#box").panel('close');//执行onBeforeClose
$("#box").panel('close',true);//不执行onBeforeClose
});
$("#btn4").click(function () {
$("#box").panel('refresh');//不执行onBeforeClose
// $("#box").panel('refresh',"http://www.baidu.com");//不执行onBeforeClose
});
//重新设置面板大小
$("#btn5").click(function () {
$("#box").panel('resize',{
left:100,
top:100,
width:250,
height:250,
});
});
//移动面板
$("#btn6").click(function () {
$("#box").panel('move',{
left:200,
top:200,
});
});
$("#btn7").click(function () {
$("#box").panel('maximize');
});
$("#btn8").click(function () {
$("#box").panel('minimize');
});
$("#btn9").click(function () {
$("#box").panel('restore');
});
$("#btn10").click(function () {
$("#box").panel('collapse');
});
$("#btn11").click(function () {
$("#box").panel('expand');
});
});效果图
------------------------------------------------
