jQuery EasyUI 窗口 – 窗口與布局

jQuery EasyUI 窗口 - 窗口與布局

你可以在jQuery EasyUI窗口（window）中內(nèi)嵌Layout組件。在不需要使用到j(luò)s代碼的情況下，你可以創(chuàng)建一個(gè)復(fù)雜的布局窗口——通過(guò)jquery-easyui框架能夠幫我們?cè)诤笈_(tái)做渲染和調(diào)整尺寸。

在本節(jié)的實(shí)例中，我們創(chuàng)建一個(gè)窗口，它包含兩個(gè)部分，一個(gè)放置在左邊一個(gè)放置在右邊；在窗口的左邊我們創(chuàng)建一個(gè)樹形菜單（tree），在窗口（window）的右邊我們創(chuàng)建一個(gè)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>

請(qǐng)看上面的代碼，我們僅僅使用了HTML標(biāo)記，一個(gè)復(fù)雜的布局窗口（window）將顯示。這就是jquery-easyui框架，簡(jiǎn)單而強(qiáng)大。

下載 jQuery EasyUI 實(shí)例

jeasyui-win-win3.zip