03-EasyUI_panel
panel的使用
- panel属性的设置
- panel方法的调用
- 属性iconCls的设置
- open/close/destroy方法
1. 官方对panel的解释
The panel is used as a container for other contents.
It is the base component for building other components such as layout, tabs, accordion, etc.
It also provides built-in collapsible, closable, maximizable and minimizable behavior and other customized behavior.
Panels can be easily embedded into any position of web page.
2. 设置panel的属性
2.1 设置方式(二种)
(1) 以给dom结点设置属性的方式
<div id="p"
class="easyui-panel"
title="My Panel by class"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
collapsible="true"
minimizable="true"
maximizable="true"
closable="true"
iconCls="icon-save"
>
(2) $("#p").panel({属性名1:属性值1, ...})
// 设置panel的属性 $("#p").panel({....})
$('#p').panel({
width : 500,
height : 150,
title : 'My Panel',
tools : [ {
iconCls : 'icon-add',
handler : function() {
alert('new')
}
}, {
iconCls : 'icon-save',
handler : function() {
alert('save')
}
} ]
});
2.2 常用属性
collapsible : 折叠 按钮 , 默认没有
minimizable : 最小化 按钮, 默认没有
maximizable : 最小化按钮
closable : 关闭按钮
fit : to set the panel size fit it's parent container.
iconCls : 图标, 请参考 themes/icon.css 中的图标
3. 调用panel的方法
3.1 方式
$('#p').panel('methodName')
3.2 常用方法
open, close, destroy
4. 完整程序
<html>
<head>
<title>01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- js: jQuery -->
<script type="text/javascript"
src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<!-- js: EasyUI -->
<script type="text/javascript"
src="js/jquery-easyui-1.2.6/jquery.easyui.min.js" charset="UTF-8"></script>
<!-- js: I18N -->
<script type="text/javascript"
src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<!-- css: theme -->
<link rel="stylesheet"
href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link>
<!-- css: icon -->
<link rel="stylesheet" href="js/jquery-easyui-1.2.6/themes/icon.css">
<link>
<!--
The panel is used as a container for other contents.
It is the base component for building other components such as layout, tabs, accordion, etc.
It also provides built-in collapsible, closable, maximizable and minimizable behavior and other customized behavior.
Panels can be easily embedded into any position of web page.
-->
<script type="text/javascript">
$(function() {
/*
// 设置panel的属性 $("#p").panel({....})
$('#p').panel({
width : 500,
height : 150,
title : 'My Panel',
tools : [ {
iconCls : 'icon-add',
handler : function() {
alert('new')
}
}, {
iconCls : 'icon-save',
handler : function() {
alert('save')
}
} ]
});
*/
});
</script>
</head>
<body>
<!--
collapsible : 折叠 按钮 , 默认没有
minimizable : 最小化 按钮, 默认没有
maximizable : 最小化按钮
closable : 关闭按钮
iconCls : 图标, 请参考 themes/icon.css 中的图标
-->
<div id="p"
class="easyui-panel"
title="My Panel by class"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
collapsible="true"
minimizable="true"
maximizable="true"
closable="true"
iconCls="icon-save"
>
<p>panel content.</p>
<p>panel content.</p>
</div>
<!--
调用panel的方法 $('#p').panel('methodName')
隐藏后, 可以看见 dom结点灰显(Firebug中查看 display:none)
-->
<!-- open -->
<button id="openBtn" value="open">open</button>
<script type="text/javascript">
$("#openBtn").click(function(){
$("#p").panel('open');
});
</script>
<!-- close -->
<button id="openBtn" value="close" onclick="$('#p').panel('close')">close/hide</button>
<!-- destroy -->
<button id="openBtn" value="close" onclick="$('#p').panel('destroy')">destroy</button>
<!--
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
-->
</body>
</html>