jquery-easyui中创建BorderLayout布局

BorderLayout通常有五个区域：east,west,north,south,center，下面是一般的用法：

north区域用于显示页面的横幅south区域用于显示版权信息或其他说明west区域用于显示导航菜单east区域用于显示推广信息center区域用于显示主页面信息

在easyui中使用布局时首先应该确定在什么容器上应用布局，布局必须至少包含一个center区域，下面是一个例子：

    <div style="width:400px;height:300px;">        <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="showpage('java.html')">Java</a></li>                <li><a href="javascript:void(0)" onclick="showpage('cshape.html')">C#</a></li>                <li><a href="javascript:void(0)" onclick="showpage('vb.html')">VB</a></li>                <li><a href="javascript:void(0)" onclick="showpage('erlang.html')">Erlang</a></li>            </ul>        </div>        <div id="content" region="center" title="Language" href="java.html" style="padding:5px;">        </div>    </div>

我们在一个DIV容器上建立了一个左右分栏的布局，左边是导航菜单，右边是主页面内容。在center区域中我们使用href属性指定一个页面让其加载该页面的内容。

运行页面layout.html后可以看到下面的显示：

最后我们为导航菜单编写onclick事件处理函数用于加载指定页面的内容，这个函数很简单：

function showpage(url){    $('#content').load(url);}

?

原文及范例的下载地址请见：http://jquery-easyui.wikidot.com/tutorial:layout

?