jQuery EasyUI 窗口 - 窗口与布局

Layout 组件能够内嵌在窗口(window)中。咱们能够创立一个杂乱的布局窗口,甚至不需要写任何的 js 代码。jquery-easyui 结构帮咱们在后台做烘托和调整尺度。

作为一个实例,咱们创立一个窗口(window),它包括两个部分,一个放置在左面一个放置在右边。在窗口(window)的左面咱们创立一个树形菜单(tree),在窗口(window)的右边咱们创立一个 tabs 容器。

	<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 framework help you build your web page easily.
					</div>
					<div title="Contacts">
						No contact data.
					</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 符号,一个杂乱的布局窗口(window)将显现。这便是 jquery-easyui 结构,简略而强壮。

下载 jQuery EasyUI 实例

jeasyui-win-win3.zip