1、panel是其他组件的容器。
data-options:是数据配置选项
tools表示配置图标和绑定的事件函数里面可以直接写匿名函数也可以写函数名
属性名 | 属性值类型 | 描述 | 默认值 |
---|---|---|---|
title | string | 在面板头部显示的标题文本。 | null |
iconCls | string | 设置一个16x16图标的CSS类ID显示在面板左上角。 | null |
<script type="text/javascript">
/* 图标icon-edit点击触发的事件 */
function funEdit(){
alert('edit');
}
</script>
<body>
<div id="p1" class="easyui-panel" data-options="title:'这里是panel面板头部显示的标题文本',width:400,iconCls:'icon-save',
tools:[{iconCls:'icon-save',handler:function(){alert('save')}},{iconCls:'icon-edit',handler:funEdit}]">
<div>Hello World</div>
<div>EasyUI 组件</div>
<div>easyui-panel是其他组件的容器</div>
</div>
</body>
如图所示:
2、添加panel面板关闭、打开按钮和事件
<script type="text/javascript">
/* 打开panel面板 */
function closePanel(){
$("#p1").panel('close');
}
/* 关闭panel面板 */
function openPanel(){
$("#p1").panel('open');
}
</script>
<input type="button" value="关闭" onclick="closePanel()">
<input type="button" value="打开" onclick="openPanel()">
3、添加折叠与展开panel面板按钮事件
<script type="text/javascript">
/* 折叠panel面板 */
function collapsePanel(){
$("#p1").panel('collapse');
}
/* 展开panel面板 */
function expandPanel(){
$("#p1").panel('expand');
}
</script>
<input type="button" value="折叠panel面板" onclick="collapsePanel()">
<input type="button" value="展开叠panel面板" onclick="expandPanel()">
4、添加最大化与最小化panel面板按钮事件
<script type="text/javascript">
/* 最大化panel面板 */
function maxPanel(){
$("#p1").panel('maximize');
}
/* 最小化panel面板 */
function minPanel(){
$("#p1").panel('minimize');
}
</script>
<input type="button" value="最大化panel面板" onclick="maxPanel()">
<input type="button" value="最小化panel面板" onclick="minPanel()">
5、通过属性来控制最大化最小化
<div id="p2" class="easyui-panel" data-options="title:'第二个panel面板',collapsible:true,minimizable:true,maximizable:true,closable:true">
<div>Hello World</div>
<div>EasyUI 组件</div>
<div>easyui-panel是其他组件的容器</div>
</div>
<!--
常用属性介绍
collapsible:true/false,定义是否显示可折叠按钮。
minimizable:true/false,定义是否最小化按钮。
maximizable:true/false,定义是否最大化按钮。
closable:true/false,定义是否显示关闭按钮。
-->
6、panel加载内容的面板
<script type="text/javascript">
function getDatas(){
$("#data").panel('refresh','randomMsg.do');
}
</script>
</head>
<body>
<div id="data" title="加载内容的面板" class="easyui-panel" style="width: 400px;height: 300px"
data-options="tools:[{iconCls:'icon-reload',handler:getDatas}]">
</div>
</body>
7、panel面板布局
<h1> 东西 南北中 布局 </h1>
<div class="easyui-panel" style="width: 500px;height: 400px;" >
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true" style="width: 200px">左边</div>
<div data-options="region:'center'" >中间</div>
<div data-options="region:'east',split:true" style="width: 100px">右边</div>
</div>
</div>
<!--
easyui-layout :布局
fit:true 表示让组件填充满整个组件
region:只当前布局的方向
split:表示是否支持鼠标拖拽移动分割
-->