Kendo UI for jQuery——創建現代Web應用程序的最完整UI庫！查看詳情>>>

<jQuery EasyUI最新版下載>

本教程主要為大家演示如何使用jQuery EasyUI創建Web頁面的邊框布局。該邊框布局提供五個區域：east、west、north、south、center，以下是一些常見的用法：

• north區域可以用于顯示一個網站的標語
• south區域可用于顯示版權及其他注意事項
• west區域可用于顯示導航菜單
• east區域可用于顯示促銷項目
• center區域可用于顯示主要內容

想要應用一個布局，首先你應該確認一個布局容器，然后定義一些區域。布局中必須包含至少一個center區域。下面是一個布局示例：

<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"容器里創建一個邊框布局。布局將一個容器拆分為兩個部分，左邊是一個導航菜單，右邊是主要內容。

最后，我們寫一個onclick事件處理函數來檢索數據，“showcontent”功能很簡單：

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

下載該EasyUI示例：

購買最新正版授權！""