jEasyUI 創(chuàng)建邊框布局

邊框布局（border layout）提供五個區(qū)域：east、west、north、south、center。以下是一些通常用法：

north 區(qū)域可以用來顯示網(wǎng)站的標(biāo)語。
south 區(qū)域可以用來顯示版權(quán)以及一些說明。
west 區(qū)域可以用來顯示導(dǎo)航菜單。
east 區(qū)域可以用來顯示一些推廣的項目。
center 區(qū)域可以用來顯示主要的內(nèi)容。

為了應(yīng)用布局（layout），您應(yīng)該確定一個布局（layout）容器，然后定義一些區(qū)域。布局（layout）必須至少需要一個 center 區(qū)域，以下是一個布局（layout）實例：

????<div class="easyui-layout" style="width:400px;height:200px;">
????????<div region="west" split="true" title="Navigator" style="width:150px;">
????????????<p style="padding:5px;margin:0;">Select language:</p>
????????????<ul>
????????????????<li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
????????????????<li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
????????????????<li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
????????????????<li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
????????????</ul>
????????</div>
????????<div id="content" region="center" title="Language" style="padding:5px;">
????????</div>
????</div>

我們在一個 <div> 容器中創(chuàng)建了一個邊框布局（border layout），布局（layout）把容器切割為兩個部分，左邊是導(dǎo)航菜單，右邊是主要內(nèi)容。

最后我們寫一個 onclick 事件處理函數(shù)來檢索數(shù)據(jù)，'showcontent' 函數(shù)非常簡單：

????function showcontent(language){
????????$('#content').html('Introduction to ' + language + ' language');
????}

上一篇：jEasyUI 創(chuàng)建分割按鈕下一篇：jEasyUI 創(chuàng)建復(fù)雜布局