国产一级特,亚洲欧美中文高清在线专区,久草视频免费

jQuery EasyUI使用教程：窗口和布局

原創(chuàng)|使用教程|編輯：龔雪|2016-05-10 09:22:23.000|閱讀 407 次

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

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

jQuery EasyUI最新試用版下載請(qǐng)猛戳>>

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

作為一個(gè)實(shí)例，我們創(chuàng)建一個(gè)窗口，它包含兩個(gè)部分：一個(gè)放置在左邊一個(gè)放置在右邊。在窗口的左邊我們創(chuàng)建一個(gè)樹形菜單，在窗口（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>

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

下載EasyUI示例：