jquery-easyui中创建BorderLayout布局

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

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

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

<div class="layout-container" 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 class="layout-container" 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);
}

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

 

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