jq easy ui lay out 使用方法

使用 jq easy ui 首先需要在文档头目引入相应的css ,jq文件`
引入顺序按照如下代码：

  <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
   <link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
   <script src="jq/jquery.min.js" type="text/javascript"></script>
    <script src="jq/jquery.easyui.min.js" type="text/javascript"></script>

lay out 布局就是在一个div中添加一个class属性为 easyui-layout 在div的内部有可分为 west :左 ,north:上 ,east:右,south:上 center:中区域
其中:center中心区域必须有

例如：`

<div data-options="region:'north'" style="height:50px">上端内容</div>
		<div data-options="region:'south',title:'south',collapsible:false,split:true" style="height:50px;"> 下端内容</div>
        <div data-options="region:'west',title:'菜单导航栏',collapsible:false,split:true" style="height:50px; width:200px;"> 
        
        </div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'" style="padding:10px">中间内容</div>

以下属性用法如下：
布局选项（Layout Options）
名称类型描述默认值
fit boolean 当设置为 true 时，就设置布局（layout）的尺寸适应它的父容器。当在 ‘body’ 标签上创建布局（layout）时，它将自动最大化到整个页面的全部尺寸。 false

区域面板选项（Region Panel Options）
区域面板选项（Region Panel Options）是定义在面板（panel）组件中，下面是一些共同的和新增的属性：
名称类型描述默认值
title string 布局面板（layout panel）的标题文本。 null
region string 定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center。
border boolean 当设置为 true 时，就显示布局面板（layout panel）的边框。 true
split boolean 当设置为 true 时，就显示拆分栏，用户可以用它改变面板（panel）的尺寸。 false
iconCls string 在面板（panel）头部显示一个图标的 CSS class。 null
href string 从远程站点加载数据的 URL 。 null
collapsible boolean 定义是否显示可折叠按钮。 true
minWidth number 面板（panel）最小宽度。 10
minHeight number 面板（panel）最小高度。 10
maxWidth number 面板（panel）最大宽度。 10000
maxHeight number 面板（panel）最大高度。 10000
方法
名称参数描述
resize none 设置布局（layout）的尺寸。
panel region 返回指定的面板（panel），‘region’ 参数可能的值是：‘north’、‘south’、‘east’、‘west’、‘center’。
collapse region 折叠指定的面板（panel），‘region’ 参数可能的值是：‘north’、‘south’、‘east’、‘west’。
expand region 展开指定的面板（panel），‘region’ 参数可能的值是：‘north’、‘south’、‘east’、‘west’。
add options 添加一个指定的面板（panel），options 参数一个配置对象，更多细节请参阅标签页面板（tab panel）属性。
remove region 移除指定的面板（panel），‘region’ 参数可能的值：‘north’、‘south’、‘east’、‘west’。
各方法例子如下：
1、添加删除区域

	function addPanel(){
			var region = $('#region').val();
			var options = {
				region: region
			};
			if (region=='north' || region=='south'){
				options.height = 50;
			} else {
				options.width = 100;
				options.split = true;
				options.title = $('#region option:selected').text();
			}
			$('#cc').layout('add', options);
		}
		function removePanel(){
			$('#cc').layout('remove', $('#region').val());
		}

2、自适应高度

<h2>Auto Height for Layout</h2>
	<p>This example shows how to auto adjust layout height after dynamically adding items.</p>
	<div style="margin:20px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addItem()">Add Item</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeItem()">Remove Item</a>
	</div>
	<div id="cc" style="width:700px;height:350px;">
		<div data-options="region:'north'" style="height:50px"></div>
		<div data-options="region:'south'" style="height:50px;"></div>
		<div data-options="region:'west'" style="width:150px;"></div>
		<div data-options="region:'center'" style="padding:20px">
			<p>Panel Content.</p>
			<p>Panel Content.</p>
			<p>Panel Content.</p>
			<p>Panel Content.</p>
			<p>Panel Content.</p>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$('#cc').layout();
			setHeight();
		});
		
		function addItem(){
			$('#cc').layout('panel','center').append('<p>More Panel Content.</p>');
			setHeight();
		}
		
		function removeItem(){
			$('#cc').layout('panel','center').find('p:last').remove();
			setHeight();
		}
		
		function setHeight(){
			var c = $('#cc');
			var p = c.layout('panel','center');	// get the center panel
			var oldHeight = p.panel('panel').outerHeight();
			p.panel('resize', {height:'auto'});
			var newHeight = p.panel('panel').outerHeight();
			c.layout('resize',{
				height: (c.height() + newHeight - oldHeight)
			});
		}
	</script>

jq easy ui lay out 使用方法

猜你喜欢