使用easyUI创建一个border layout在你的web页面

@author YHC

 border layout提供5个区域:east,west,north,south,center. 以下是一些正常用法:

• north区域可以使用作为你的网站的标语.
• south区域可以用来显示版权以及一些说明.
• west区域可以用来做导航菜单.
• east区域可以显示一些你的推广的项目.
• center区域用来显示主要的内容.

查看 Demo

应用一个layout你应该确定一个layout 容器然后定义一些区域,layout 必须至少需要一个center区域,以下是一个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>  

我们创建一个 border layout在一个<div/>容器中,layout 切割容器分为2个部分,左边是导航菜单,右边是主要内容.
最后我们写一个click事件处理函数去检索数据, showcontent函数非常简单.

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

下载EasyUI示例代码:

easyui-layout-demo.zip