jEasyUI 布局学习笔记

1. 概述

jEasyUI 是一套基于 jQuery 的 UI 插件库，具有丰富的 UI 组件和易于使用的 API。其中，布局组件可以帮助我们快速搭建页面布局，提高开发效率。

2. 布局组件

2.1. Panel

Panel 组件是一种基本的容器，可以用于包含其他组件。可以设置标题、图标和工具按钮等属性，支持折叠、最小化、最大化等功能。

Copy Code
<div id="panel" style="width:500px;height:300px;"></div>

<script>
    $('#panel').panel({
        title: 'Panel 标题',
        iconCls: 'icon-save', // 图标
        tools: [{
            iconCls: 'icon-help',
            handler: function(){
                alert('帮助内容');
            }
        }],
        closable: true, // 是否显示关闭按钮
        collapsible: true, // 是否可折叠
        minimizable: true, // 是否可最小化
        maximizable: true, // 是否可最大化
        border: false, // 是否显示边框
        href: 'http://www.example.com/', // 异步加载内容
        cache: false // 是否缓存异步加载的内容
    });
</script>

2.2. Layout

Layout 组件定义了网站的整体布局方式，支持多种类型的布局，如 North-South-East-West 中央布局、Border 布局、Accordion 布局等。

Copy Code
<div id="layout" style="width:500px;height:300px;"></div>

<script>
    $('#layout').layout({
        fit: true, // 填充父容器
        border: false,
        north: {
            title: 'North 区域',
            height: 100,
            split: true, // 可拖动调整大小
            collapsible: true
        },
        east: {
            title: 'East 区域',
            width: 150,
            split: true,
            collapsible: true
        },
        center: {
            title: 'Center 区域'
        }
    });
</script>

2.3. Tab

Tab 组件用于显示多个页面内容，每个页面都可以包含其他组件。可以设置页签的位置和样式，支持动态添加和删除页签。

Copy Code
<div id="tab" style="width:500px;height:300px;"></div>

<script>
    $('#tab').tabs({
        fit: true,
        border: false,
        plain: true, // 是否显示背景色
        tabPosition: 'right', // 页签位置
        onAdd: function(title){
            alert('添加 ' + title);
        },
        onClose: function(title){
            alert('关闭 ' + title);
        }
    });
    // 添加页签
    $('#tab').tabs('add', {
        title: 'Tab1',
        href: 'http://www.example.com/'
    });
</script>

3. 总结

jEasyUI 的布局组件可以大大提高网站开发的效率，让我们能够快速实现各种布局要求。同时，jEasyUI 还提供了很多强大的组件和工具，可以帮助我们构建更加丰富、交互性更好的网站。