1、基本使用
代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<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>
|
或
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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的使用
代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<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事件
代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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属性
代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
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: 新面板的顶部位置 |
扫一扫
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
