jQuery EasyUI 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

边框布局

边框布局(border layout)提供五个区域:east、west、north、south、center。以下是一些通常用法:

  1. north 区域可以用来显示网站的标语。
  2. south 区域可以用来显示版权以及一些说明。
  3. west 区域可以用来显示导航菜单。
  4. east 区域可以用来显示一些推广的项目。
  5. center 区域可以用来显示主要的内容。
  

下面就来介绍创建布局的几种方法。

1. 通过标签创建布局

为< div >标签增加名为'easyui-layout'的类。

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>  
</div>

2. 使用完整页面创建布局

<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
</body>

3. 创建嵌套布局

嵌套在内部的布局面板的左侧面板是折叠的。

<body class="easyui-layout">   
    <div data-options="region:'north'" style="height:100px"></div>   
    <div data-options="region:'center'">   
        <div class="easyui-layout" data-options="fit:true">   
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>   
            <div data-options="region:'center'"></div>   
        </div>   
    </div>   
</body>

我们可以用以下方法折叠布局面板

$('#cc').layout();    
// collapse the west panel    
$('#cc').layout('collapse','west');

如下js代码添加西侧区域面板和工具菜单按钮。

$('#cc').layout('add',{    
    region: 'west',    
    width: 180,    
    title: 'West Title',    
    split: true,    
    tools: [{    
        iconCls:'icon-add',    
        handler:function(){alert('add')}    
    },{    
        iconCls:'icon-remove',    
        handler:function(){alert('remove')}    
    }]    
});

关于布局面板的属性与方法还有很多,我们就不多做介绍了,有兴趣的同学请看这里

自己去创建一个右侧的布局面板。