004 布局容器

一.概述

我们的webui组件在使用的过程之中,都需要将这些组件放置在一定容器之中.我们将这些容器在页面之中进行布局,这样相应的我们就能使用这些组件了.

在easyui之中,panel是容器的根对象,但是我们常常不会去使用这些基础的组件.我们最为常用的就是dialog组件了.

---

二.dialog组件.

这个组件的显示效果就是一个对话框,我们可以在dialog之中增加工具栏和按钮.

eg:基本的使用.

$('#dialog').dialog({
　　title:'我是一个dialog',
　　content : '我是内容',
　　400,
　　height:300,
//增加工具栏
　　toolbar : [{ //工具栏
　　　　text:'编辑',
　　　　iconCls:'icon-edit',
　　　　handler:function(){alert('edit')}
　　　　},{
　　　　text:'帮助',
　　　　iconCls:'icon-help',
　　　　handler:function(){alert('help')}
　　}],
　　buttons:[ //按钮
　　　　{
　　　　text:'保存',
　　　　handler:function(){}
　　　　},{
　　　　text:'关闭',
　　　　handler:function(){}
　　　　}
　　]
});

---------------------

基本的布局就是上面的显示方式.

------------------------------------

三 .tabs 组件.

基本的使用也非常简单,

<div id="tt" class="easyui-tabs" style="500px;height:250px;" >
　　<div title="Tab1" style="padding:20px;display:none;">
　　　　tab1
　　</div>
　　<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
　　　　tab2
　　</div>
　　<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
　　　　tab3
　　</div>
</div>

实际上我们能够看到其实就是一个div 变成了父容器,剩下的的panel变成了tab.

相同的还有一个组件accordion.

其实从根本上面还是一个div作为父容器,剩下的panel作为子容器.