首先引入相关的js 和 css
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jq/jquery.min.js" type="text/javascript"></script>
<script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
通过JS的方式加载panel
<script type="text/javascript">
$(function () {
LoadData();
});
function LoadData() {
$('#tt').panel({
title: '数据信息', //标题信息
iconCls: 'icon-save', //头部图标
collapsible: true, //是否有折叠按钮
minimizable: true, //是否显示最小化按钮
maximizable: true, //是否显示最大化按钮
closable: true, //是否折叠起来
width: '700', //设置宽度
height: '800', //设置高度
closed: false, //是否关闭
loadingMessage: '加载数据信息',//加载数据时的显示信息
tools: [{ //工具栏按钮
iconCls: 'icon-add', //工具图标
handler: function () { alert('new') } //点击工具栏按钮返回的事件
},
{
iconCls: 'icon-save',
handler: function () { alert('save') }
}],
href: 'Type.ashx', //一个 URL，用它加载远程数据并且显示在面板（panel）里。请注意，除非面板（panel）打开，否则内容不会被加载。这对创建一个惰性加载的面板（panel）很有用：
onLoad: function () { //当远程数据被加载时触发。
},
onBeforeOpen: function () { //面板（panel）打开前触发，返回 false 就停止打开。
},
onClose: function () { //面板（panel）关闭后触发。
},
onBeforeCollapse: function () { //面板（panel）折叠前触发，返回false就停止折叠。
},
onCollapse: function () { //面板（panel）折叠后触发。
},
onBeforeExpand: function () { //面板（panel）展开前触发，返回false就停止展开。
},
onExpand: function () { // 面板（panel）展开后触发。
},
onMove: function (left, top) { // 面板（panel）移动后触发。 left：新的左边位置 top：新的顶部位置
}
})
.panel('setTitle') //设置头部的标题文本。
.panel('open')// 当 forceOpen 参数设置为 true 时，就绕过 onBeforeOpen 回调函数打开面板（panel）。
.panel('close') //当 forceClose 参数设置为 true 时，就绕过 onBeforeClose 回调函数关闭面板（panel）。
.panel('maximize') // 面板（panel）适应它的容器的尺寸。
.panel('minimize') // 最小化面板（panel）。
.panel('collapse') //折叠面板（panel）主体。
.panel('expand') //展开面板（panel）主体。
}
</script>
body部分
<body>
<form id="form1" runat="server">
<div id="tt">
</div>
</form>
</body>
扫一扫
1039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
