jEasyUI 窗口與布局

Layout 組件可以內(nèi)嵌在窗口（window）中。我們可以創(chuàng)建一個(gè)復(fù)雜的布局窗口，甚至不需要寫任何的 js 代碼。jquery-easyui 框架幫我們?cè)诤笈_(tái)做渲染和調(diào)整尺寸。

作為一個(gè)實(shí)例，我們創(chuàng)建一個(gè)窗口（window），它包含兩個(gè)部分，一個(gè)放置在左邊一個(gè)放置在右邊。在窗口（window）的左邊我們創(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 框架，簡單而強(qiáng)大。

上一篇：jEasyUI 自定義窗口工具欄下一篇：jEasyUI 創(chuàng)建對(duì)話框