jQueryEasyUI Panel的基本使用
1、基本使用
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pannel</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#pnl").panel({
title: "标题",
width: 300,
height: 200
});
});
</script>
</head>
<body>
<div id="pnl">
Content
</div>
</body>
</html>
或
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pannel</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
<div id="pnl" class="easyui-panel" title="标题" style="width: 300px; height: 200px;">
Content
</div>
</body>
</html>
效果图：
2、icon的使用
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pannel</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#pnl").panel({
title: "标题",
width: 300,
height: 200,
iconCls: "icon-add",
collapsible: true,
minimizable: true,
maximizable: true,
closable: true
});
});
</script>
</head>
<body>
<div id="pnl">
Content
</div>
</body>
</html>
效果图：
3、Button事件
代码：
<script type="text/javascript">
$(function () {
$("#pnl").panel({
title: "标题",
width: 300,
height: 200,
iconCls: "icon-add",
collapsible: true,
minimizable: true,
maximizable: true,
closable: true,
onBeforeClose: function () {
alert("Close");
}
});
});
</script>
4、href属性
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Pannel</title>
<link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#pnl").panel({
title: "标题",
width: 300,
height: 200,
iconCls: "icon-add",
collapsible: true,
minimizable: true,
maximizable: true,
closable: true,
href: "Content.aspx"
});
});
</script>
</head>
<body>
<div id="pnl">
</div>
</body>
</html>
Content.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="padding: 5px;">
<asp:Label ID="lblUserName" runat="server" Text="用户名"></asp:Label>:
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
效果图：
5、参数
| 名字 |
类型 |
描述 |
默认值 |
| title |
字符串 |
在面板头部显示的标题文本 |
null |
| iconCls |
字符串 |
一个CSS类来显示在面板中的16x16图标 |
null |
| width |
数字 |
设置面板的宽度 |
auto |
| height |
数字 |
设置面板的高度 |
auto |
| left |
数字 |
设置面板左侧位置 |
null |
| top |
数字 |
设置面板的顶部位置 |
null |
| cls |
字符串 |
给面板添加一个CSS类 |
null |
| headerCls |
字符串 |
给面板头部添加一个CSS类 |
null |
| bodyCls |
字符串 |
给面板主体添加一个CSS类 |
null |
| style |
对象 |
给面板自定义样式 |
{} |
| fit |
布尔 |
当设置为true，面板尺寸将适合它的父容器。 |
false |
| border |
布尔 |
定义面板的边框 |
true |
| doSize |
布尔 |
当设置为true，面板载创建的时候将被调整和重新布局 |
true |
| collapsible |
布尔 |
定义是否显示可折叠定义按钮 |
false |
| minimizable |
布尔 |
定义是否显示最小化按钮 |
false |
| maximizable |
布尔 |
定义是否显示最大化按钮 |
false |
| closable |
布尔 |
定义是否显示关闭按钮 |
false |
| tools |
数组 |
自定义工具，每个工具可以包含两个属性：iconCls and handler |
[] |
| collapsed |
布尔 |
定义在初始化的时候折叠面板 |
false |
| minimized |
布尔 |
定义在初始化的时候最小化面板 |
false |
| maximized |
布尔 |
定义在初始化的时候最大化面板 |
false |
| closed |
布尔 |
定义在初始化的时候关闭面板 |
false |
| href |
字符串 |
一个远程的URL加载数据，然后显示在面板中 |
null |
| loadingMessage |
字符串 |
当加载远程数据时，在面板中显示的信息 |
Loading… |
6、事件
| 名字 |
参数 |
描述 |
| onLoad |
none |
当远程数据加载时触发 |
| onBeforeOpen |
none |
当面板打开之前触发 |
| onOpen |
none |
当面板打开之后触发 |
| onBeforeClose |
none |
当面板关闭之前触发 |
| onClose |
none |
当面板关闭之后触发 |
| onBeforeDestroy |
none |
当面板销毁之前触发 |
| onDestroy |
none |
当面板关闭之后触发 |
| onBeforeCollpase |
none |
当面板折叠之前触发 |
| onCollapse |
none |
当面板折叠之后触发 |
| onBeforeExpand |
none |
当面板展开之前触发 |
| onExpand |
none |
当面板展开之后触发 |
| onResize |
width, height |
当面板调整大小之后触发width: 新的宽度;height: 新的高度 |
| onMove |
left,top |
当面板移动之后触发left: 新的左侧位置top: 新的顶部位置 |
| onMaximize |
none |
当窗口最大化的时候被触发 |
| onRestore |
none |
当窗口恢复到原来的大小时被触发 |
| onMinimize |
none |
当窗口最小化的时候被触发 |
7、方法
| 名字 |
参数 |
描述 |
| options |
none |
返回设置的属性值 |
| panel |
none |
返回面板对象 |
| header |
none |
返回面板头部对象 |
| body |
none |
返回面板主体对象 |
| setTitle |
title |
设置面板头部标题 |
| open |
forceOpen |
当forceOpen设置为true，面板被打开的时候忽略onBeforeOpen回调函数 |
| close |
forceClose |
当forceClose设置为true，面板被关闭的时候忽略onBeforeClose回调函数 |
| destroy |
forceDestroy |
当forceDestroy设置为true，面板被销毁的时候忽略onBeforeDestroy回调函数 |
| refresh |
none |
当设置了href值时，刷新面板来加载远程数据 |
| resize |
options |
设置面板的大小和布局，这些选项包含以下的属性：width: 新面板的宽度; height: 新面板的高度; left: 新面板的左侧位置; top: 新面板的顶部位置 |
| move |
options |
移动面板到一个新的位置，这些选项包含以下属性: left: 新面板的左侧位置;top: 新面板的顶部位置 |