窗口和布局

使用教程 » 窗口和布局

布局组件可以嵌套在窗口中。我们可以构建一个复杂的布局窗口，甚至不写任何js代码。jquery-easyui框架帮助我们在后台做渲染和调整大小的工作.

作为一个例子，我们构建一个包含两个部分的窗口，一个放在左边，另一个放在右边。在我们创建的窗口的左边树和在窗口的右边创建一个选项卡容器。

<div class="easyui-window" title="Layout Window" icon="icon-help" style="width:500px;height:250px;padding:5px;background: #fafafa;">
		<div class="easyui-layout" fit="true">
			<div region="west" split="true" style="width:120px;">
				<ul class="easyui-tree">
					<li>
						<span>Library</span>
						<ul>
							<li><span>easyui</span></li>
							<li><span>Music</span></li>
							<li><span>Picture</span></li>
							<li><span>Database</span></li>
						</ul>
					</li>
				</ul>
			</div>
			<div region="center" border="false" border="false">
				<div class="easyui-tabs" fit="true">
					<div title="Home" style="padding:10px;">
						jQuery easyui框架帮助您轻松构建web页面。
					</div>
					<div title="Contacts">
						没有关联数据。
					</div>
				</div>
			</div>
			<div region="south" border="false" style="text-align:right;height:30px;line-height:30px;">
				<a class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)">Ok</a>
				<a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">Cancel</a>
			</div>
		</div>
	</div>

看到上面的代码，我们只使用HTML标记和复杂的布局窗口显示。这是jquery-easyui框架，简单而强大.

下载 EasyUI 实例:

easyui-window-demo.zip