layout（布局）组件

Posted 2022-12-19 alaic2052243080

一、依赖于 Panel（面 板）组件和 resizable(调整大小)组件。

二、class加载方式

   <div id="box" class="easyui-layout" style="height: 600px;width: 400px">
　　　　<div data-options="region:‘north‘" title="north" style="height: 100px;"></div>
　　　　<div data-options="region:‘south‘" title="south" style="height: 100px;"></div>
　　　　<div data-options="region:‘west‘" title="west" style="width: 100px"></div>
　　　　<div data-options="region:‘east‘" title="east" style="width: 100px"></div>
　　　　<div data-options="region:‘center‘" title="center"></div>
   </div>

三、js加载方式

　　<div id="box" style="height: 600px;width: 400px">
　　<div data-options="region:‘north‘,maxHeight:‘200‘"
　　　　border=‘false‘
　　　　iconCls=‘icon-add‘
　　　　title=‘north‘
　　　　href="index.html"
　　　　collapsible="false"
　　　　style ="height: 100px;"></div>
　　<div data-options="region:‘south‘" title="south" style="height: 100px;"></div>
　　<div data-options="region:‘west‘" title="west" style="width: 100px"></div>
　　<div data-options="region:‘east‘" title="east" style="width: 100px"></div>
　　<div data-options="region:‘center‘" title="center"></div>
    </div>
　　$(function ()
　　　　$("#box").layout(
　　　　//属性
　　　　　　fit:true,//如果设置为 true，布局组件将自适应父容 易。当使用 body 标签创建布局的时候，整 个页面会自动最大。默认为 false。值为boolean
　　　　);
　　　　//方法
　　　　　　console.log($(‘#box‘).layout(‘panel‘, ‘north‘));//返回指定面板
　　　　　　$(‘#box‘).layout(‘collapse‘, ‘north‘);//设置指定面板折叠,参数可用值有 ： ‘north‘,‘south‘,‘east‘,‘west‘。
　　　　　　$(‘#box‘).layout(‘expand‘, ‘north‘);//设置指定面板展开,参数可用值有 ： ‘north‘,‘south‘,‘east‘,‘west‘。
　　　　　　$(document).click(function () $(‘#box‘).layout().css(‘display‘, ‘block‘); $(‘#box‘).layout(‘resize‘); );////重新调整布局和大小
　　　　　　$(‘#box‘).layout(‘add‘, title : ‘center title‘, region : ‘center‘, );//新增一个面板
　　　　　　$(‘#box‘).layout(‘remove‘, ‘north‘);////删除指定面板
　　　　)