鲁达 Panel组件
一．EasyUI 简单介绍
jQuery EasyUI框架能够让你轻松构建Web页面.
easyui是一套基于JQuery的用户界面插件集合.
easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.
使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.
完美支持HTML5.
easyui能够有效地节省你的开发时间.
easyui很简单但是很强大.
使用准备：
1.导入easyui文件
2.引入必须的的js和 css文件
<link type="text/css" rel="stylesheet" href="..;></link>
<link type="text/css" rel="stylesheet" href="..;></link>
<script type="text/javascript" src="..;></script>
<script type="text/javascript" src="..;></script>
二．基本面板组件使用
效果演示：
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="..;></link>
<link type="text/css" rel="stylesheet" href="..;></link>
<script type="text/javascript" src="..;></script>
<script type="text/javascript" src="..;></script>
</head>
<body>
<h2>基本面板</h2>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打开</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">关闭</a>
</div>
<div id="p" class="easyui-panel" title="基本面板学习" style="width:500px;height:250px;padding:10px;">
<p style="font-size:14px">jQuery EasyUI框架能够让你轻松构建Web页面.</p>
<ul>
<li>easyui是一套基于JQuery的用户界面插件集合.</li>
<li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>
<li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>
<li>完美支持HTML5.</li>
<li>easyui能够有效地节省你的开发时间.</li>
<li>easyui很简单但是很强大.</li>
</ul>
</div>
</body>
</html>
掌握要点：
1．用easyui创建一个面板
只要在元素的class设置成easyui-panel，如果要使用标题我们就在这个元素上设置title属性即可。
2．用easyui能实现面板的消失和打开
onclick="javascript:$('#p').panel('open')" 面板的打开
onclick="javascript:$('#p').panel('close')" 面板的关闭
三．面板工具
效果演示：
代码演示：
<h2>面板工具</h2>
<div style="margin:10px 0;">
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">打开</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">关闭</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('expand', 'true')">展开</a>
<a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('collapse', 'true')">折叠</a>
</div>
<div style="width:720px; height:500px; border:1px solid #ccc"><!-- 控制展开面板的大小 -->
<div id="p" class="easyui-panel" title="面板工具" style="width:500px;height:200px;padding:10px;"
data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true">
<p style="font-size:14px">jQuery EasyUI框架能够让你轻松构建Web页面.</p>
<ul>
<li>easyui是一套基于JQuery的用户界面插件集合.</li>
<li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>
<li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>
<li>完美支持HTML5.</li>
<li>easyui能够有效地节省你的开发时间.</li>
<li>easyui很简单但是很强大.</li>
</ul>
</div>
</div>
掌握要点：
1.掌握面板的图标添加
在面板的属性上添加data-options=”iconCls:icon-save”
2.掌握面板工具的添加
data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true"
图标折叠最小化最大化关闭
3.掌握按键控制展开和折叠
<a href="#" onclick="javascript:$('#p').panel('expand', 'true')">展开</a>
<a href="#" onclick="javascript:$('#p').panel('collapse', 'true')">折叠</a>
四．定制面板工具
效果演示：
代码演示：
<h2>自定义面板工具</h2>
<div id="p" class="easyui-panel" title="面板工具" style="width:500px;height:200px;padding:10px;"
data-options="iconCls:'icon-save',closable:true,tools:'#tt'">
<p style="font-size:14px">jQuery EasyUI框架能够让你轻松构建Web页面.</p>
<ul>
<li>easyui是一套基于JQuery的用户界面插件集合.</li>
</ul>
</div>
<div id="tt">
<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('添加')"></a>
<a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('编辑')"></a>
<a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('剪切')"></a>
<a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('帮助')"></a>
</div>
掌握要点：
1.掌握自定义面板的添加功能
在data-options中添加tools，tools对应的是另外一个div的id值。
五．面板异步加载内容
效果演示：
代码演示：
<div id="p" class="easyui-panel" title="面板异步加载内容" style="width:500px;height:200px;padding:10px;"
data-options="tools:[{
iconCls:'icon-reload',
handler:function(){
$('#p').panel('refresh', 'con;);
}
}]">
</div>
掌握要点：
1.掌握面板内异步添加内容
data-options="tools:[{
iconCls:'icon-reload', -- 设置工具的图标
handler:function(){ -- 设置点击图标后执行的方法
$('#p').panel('refresh', 'con;); -- 这就是面板的异步刷新
}
}]"
六．嵌套面板
效果演示：
代码演示：
<div class="easyui-panel" title="嵌套面板" style="width:500px; height:200px" data-options="iconCls:'icon-save'">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true" style="width:100px;padding:10px">
左边面板
</div>
<div data-options="region:'center'" style="padding:10px">
右边面板
</div>
</div>
</div>
掌握要点：
1.掌握嵌套面板的使用
<div class="easyui-layout" data-options="fit:true"> 面板布局容器
<div data-options="region:'west',split:true" style="width:100px;padding:10px"> region:'west'面板靠左，split:true是可以左右分割拖动
<div data-options="region:'center'" style="padding:10px">fit不居中一定要包含一个 data-options="region:'center'"