李炎恢_PHP_jQuery EasyUI[014] ~ Layout(佈局)組件 [WEB UI畫面分割配置]

李炎恢_PHP_jQuery EasyUI[014] ~ Layout(佈局)組件 [WEB UI畫面分割配置]

李炎恢_PHP_jQuery EasyUI[014] ~ Layout(佈局)組件 [WEB UI畫面分割配置]


參考資料: https://github.com/jash-git/jash-WebSI


GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI


My code:

$(function () {

	$('#box').layout({
		//fit : true,
	});
	
	/*
	$(document).click(function () {
		$('#box').layout().css('display', 'block');
		$('#box').layout('resize');
	});
	
	
	//console.log($('#box').layout('panel','north'));
	//console.log($('#box').layout('collapse','north'));
	//console.log($('#box').layout('expand','north'));
	
	$('#box').layout('add', {
		title : '中间',
		region : 'center',
	});
	*/
	$('#box').layout('remove','east');
	

});

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="../../easyui_15/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script>

<script type="text/javascript" src="js/index.js"></script>

<link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" />

</head>
<body>


<div id="box" style="width:600px;height:400px;">
	<div data-options="
		region:'north',
		title:'上北',
		border : true,
		split : true,
		iconCls : 'icon-save',
		href : 'content.html',
		collapsible : false,
		maxHeight : 100,
	" style="height:200px;"></div>
	<div data-options="region:'south',title:'下南',split : true," style="height:100px;"></div>
	<div data-options="region:'west',title:'左西',split : true," style="width:100px;"></div>
	<div data-options="region:'east',title:'右东',split : true," style="width:100px;"></div>
	<div data-options="region:'center',title:'中间'"></div>
</div>



</body>
</html>


PDF:


執行結果:

One thought on “李炎恢_PHP_jQuery EasyUI[014] ~ Layout(佈局)組件 [WEB UI畫面分割配置]

  1. 李炎恢_PHP_jQuery EasyUI[014] ~ Layout(佈局)組件 [WEB UI畫面分割配置]

    版面 規劃 左側(功能選單) 上下 右側 中間 大小 設定 CSS

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *