Jquery布局控件layout、pannel和Tabs.doc

Jquery 布局控件 easyui layout 自适应浏览器大小jquery-easyui中利用panel, layout等插件可以做出很复杂的布局效果 例子：对话MSN01. 02. 03. 04. Search: 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. Hi,I am easyui. 15. 16. 17. 18. 19. 20. 21. 22. 23. 属性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 类添加到标记pannel工具栏 panel content. panel content. $(#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(loadedsuccessfully); );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+:+optionsp+n;simpleAlert(desc)onLoadnone当远程数据被加载时触发.onBeforeOpennonePanel打开前触发，返回false就停止打开.onOpennonePanel打开后触发.onBeforeClosenonePanel关闭前触发，返回false就取消关闭.onClosenonePanel关闭后触发.onBeforeDestroynonePanel销毁前触发，返回false就取消销毁.onDestroynonePanel销毁后触发.onBeforeCollapsenonePanel折叠前触发，返回false就停止折叠.onCollapsenonePanel折叠后触发.onBeforeExpandnonePanel展开前触发，返回false就停止展开.onExpandnonePanel展开后触发.onResizewidth, heightPanel调整尺寸后触发。width：新的外部宽度。height：新的外部高度onMoveleft,topPanel移动后触发。left：新的左边位置Top：新的顶部位置 onMaximizenone窗口最大化后触发.onRestorenone窗口还原为它的原始尺寸后触发.onMinimizenone窗口最小化后触发.Tabs tab 面板Tabs组件常用于导航菜单、不同类别内容的切换等等功能上如： 创建 子标记来创建每个tab 面板, 用法类似于 panel.创建tabs, 同时捕获 onSelect 事件.onSelect：当用户选中一个tab面板时触发.1. $(#tt).tabs( 2. border:false, 3. onSelect:function(title) 4. simpleAlert(title+isselected); 5. 6. );增加新的 tab 面板1. /增加新的 tab 面板2. $(#tt).tabs(add, 3. title:NewTab, 4. content:TabBody, 5. closable:true/