Panel组件
- 面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）
- 它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置
- 我这里是接着上一篇文章继续写的，内容效果呢直接替换 body 中的标签即可看到效果
<br=""> class="easyui-panel"
title="My Panel"
data-options="iconCls:'icon-save',closable:true,collapsible:true,minimizable:true,maximizable:true">
panel content.
panel content.
</br="">
- JS 形式及属性介绍
- 定义js
<script>
$(function () {
$("#myPanel").panel({
// 标题
title: '我的面板',
// 宽度
width: 300,
// 高度
height: 300,
// 设置一个16 x 16 的图标的CSS类选择器或者ID选择器显示在面板左上角
iconCls: 'icon-add',
// 面板主题内容
content: 'BNTang',
// 是否显示可折叠按钮
collapsible: true,
// 是否显示最小化按钮
minimizable: true,
// 是否显示最大化按钮
maximizable: true,
// 是否显示关闭按钮
closable: true,
// 是否在加载的时候折叠面板
collapsed: false,
// 从URL读取远程数据并且显示到面板
href: 'BNTang.html',
// 在加载远程数据的时候，在面板显示的内容
loadingMessage: '正在加载...',
// 如果为true,在超链接加载时缓存面板内容
cache: true
})
});
</script>
Panel事件与方法
- 事件：直接添加事件名称和对应的回调方法即可
<script>
$(function () {
$("#myPanel").panel({
// 标题
title: '我的面板',
// 宽度
width: 300,
// 高度
height: 300,
// 设置一个16 x 16 的图标的CSS类选择器或者ID选择器显示在面板左上角
iconCls: 'icon-add',
// 面板主题内容
content: 'BNTang',
// 是否显示可折叠按钮
collapsible: true,
// 是否显示最小化按钮
minimizable: true,
// 是否显示最大化按钮
maximizable: true,
// 是否显示关闭按钮
closable: true,
// 是否在加载的时候折叠面板
collapsed: false,
// 从URL读取远程数据并且显示到面板
href: 'BNTang.html',
// 在加载远程数据的时候，在面板显示的内容
loadingMessage: '正在加载...',
// 如果为true,在超链接加载时缓存面板内容
cache: true,
// 窗口关闭回调
onClose: function () {
console.log('窗口关闭');
}
})
});
</script>
- 方法：通过方法可以设置Panel组件的一些属性
<div id="myPanel"></div>
<a href="javascript:;" id="btn">修改Panel标题</a>
<script>
$(function () {
$("#myPanel").panel({
// 标题
title: '我的面板',
// 宽度
width: 300,
// 高度
height: 300,
// 设置一个16 x 16 的图标的CSS类选择器或者ID选择器显示在面板左上角
iconCls: 'icon-add',
// 面板主题内容
content: 'BNTang',
// 是否显示可折叠按钮
collapsible: true,
// 是否显示最小化按钮
minimizable: true,
// 是否显示最大化按钮
maximizable: true,
// 是否显示关闭按钮
closable: true,
// 是否在加载的时候折叠面板
collapsed: false,
// 从URL读取远程数据并且显示到面板
href: 'BNTang.html',
// 在加载远程数据的时候，在面板显示的内容
loadingMessage: '正在加载...',
// 如果为true,在超链接加载时缓存面板内容
cache: true,
// 窗口关闭回调
onClose: function () {
console.log('窗口关闭');
}
})
$("#btn").click(function () {
// 组件对象.组件名称(方法名称, 方法参数)
$("#myPanel").panel("setTitle", "new Title");
});
});
</script>
