Jquery布局控件layout、pannel和Tabs

Jquery 布局控件easyui layout 自适应浏览器大小
jquery-easyui中利用panel, layout等插件可以做出很复杂的布局效果例子：对话MSN
01.<div class="easyui-panel" title="Complex Panel Layout" icon="icon-search" collapsible="true"
style="padding:5px;width:500px;height:250px;">
02. <div class="easyui-layout" fit="true">
03. <div region="north" border="false" class="p-search">
04. <label>Search:</label><input></input>
05. </div>
06. <div region="center" border="false">
07. <div class="easyui-layout" fit="true">
08. <div region="east" border="false" class="p-right">
09. <img src="msn.gif"/>
10. </div>
11. <div region="center" border="false" style="border:1px solid #ccc;">
12. <div class="easyui-layout" fit="true">
13. <div region="south" split="true" border="false" style="height:60px;">
14. <textarea style="overflow:auto;border:0;width:100%;height:100%;">Hi,I am easyui.</textarea>
15. </div>
16. <div region="center" border="false">
17. </div>
18. </div>
19. </div>
20. </div>
21. </div>
22. </div>
23.</div>
属性closable="true" 可关闭属性属性selected="true" 初始化选择属性
fit="true"在框内适应大小大小不超过父窗（尺寸适应它的父容器.）
split="true" True 就显示拆分栏，用户可以用它改变panel 的尺寸.
region 定义layout panel 的位置，其值是下列之一：north、south、east、west、center class="easyui-layout" 嵌套布局'easyui-layout' 类在div标记中创建layout布局iconCls="icon-reload" 加载的图标
class="easyui-tree" 树状布局
class="easyui-accordion" 下拉式菜单布局
class="easyui-tabs" 行列式菜单布局
pannel面板
从标记创建pannel更容易把'easyui-panel' 类添加到<div/>标记
pannel工具栏
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
$('#p').panel({
width:500,
height:150,
title: 'My Panel',
tools: [{
iconCls:'icon-add',
handler:function(){simpleAlert('new')}
},{
iconCls:'icon-save'
handler:function(){simpleAlert('save')}
}]
});
$('#p').panel('move') 移动pannel
经由ajax加载panel内容并且当加载成功时显示一些信息：
$('#p').panel({href:'content_url.php', onLoad:function(){simpleAlert('loaded successfully'); }});
closable="true" 关闭属性
collapsible="true" 定义了是否显示折叠按钮.
minimizable="true" 最小化属性
maximizable=true 最大化属性
事件
$(function(){
$('#p').bind('onBeforeClose',function(){simpleAlert('打开panel');});
function load1(){$('#p').panel('refresh','title_msg.jsp');}
function setTitle1(){$('#p').panel('setTitle','new title');}
function maximize1(){$('#p').panel('maximize');
//获得基本配置属性
function getOptons1(){var options = $('#p').panel('options'); var desc="";
for(var p in options){desc+=p+":"+options[p]+"\n";}
simpleAlert(desc)}
Tabs tab 面板
Tabs组件常用于导航菜单、不同类别内容的切换等等功能上
如：
创建<div/> 子标记来创建每个tab 面板, 用法类似于panel. <div id="aa" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
创建tabs, 同时捕获 'onSelect' 事件.
onSelect：当用户选中一个tab面板时触发.
增加新的tab 面板
获取选中的Tab。