EasyUI学习笔记之panel

Posted 2020-08-12 日月心诚

《easyUI panel 属性：》

<!--引入easyUI panel 组件 设置宽，高，定义标题（默认在左上角），设置图标iconCls:‘icon-ok‘，引入工具tools:‘#tt‘-->

<id="tt",这个标签内的内容被当做tool属性的值，做了添加和编辑的JS操作事件>

<div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:‘icon-ok‘,tools:‘#tt‘">
</div>
<div id="tt">
<a href="#" class="icon-add" onclick="javascript:alert(‘add‘)"></a>
<a href="#" class="icon-edit" onclick="javascript:alert(‘edit‘)"></a>
</div>

 

另外一种实现方式：数组形式，两个参数：iconcls和handler函数

1. <div class="easyui-panel" style="width:300px;height:200px"
2. title="My Panel" data-options="iconCls:‘icon-ok‘,tools:[
3. {
4. iconCls:‘icon-add‘,
5. handler:function(){alert(‘add‘)}
6. },{
7. iconCls:‘icon-edit‘,
8. handler:function(){alert(‘edit‘)}
9. }]">
10. </div>

panel 内嵌套布局：

<!-- layout 组件用于布局，region:‘west‘, 表示左边的区域 split:true 表示区域之间有分割线-->

1. <div class="easyui-panel" title="Nested Panel" style="width:700px;height:200px;padding:10px;">
2. <div class="easyui-layout" data-options="fit:true">
3. <div data-options="region:‘west‘,split:true" style="width:100px;padding:10px">
4. Left Content
5. </div>
6. <div data-options="region:‘east‘" style="width:100px;padding:10px">
7. Right Content
8. </div>
9. <div data-options="region:‘center‘" style="padding:10px">
10. center Content
11. </div>
12. </div>