EasyUI jQuery Layout Widget

EasyUI jQuery Layout Widget is a powerful and flexible layout widget designed for building complex user interfaces. It allows developers to divide the screen into regions and arrange the UI elements in these regions to create a responsive and user-friendly interface.

Features

• Divides the screen into multiple regions
• Easily manages the layout of UI elements
• Supports nested layouts
• Responsive design
• Collapsible panels
• Floating panels
• Customizable settings

Getting Started

Installation

The EasyUI jQuery Layout Widget can be downloaded from the official website. Alternatively, it can be installed using a package manager such as npm:

npm install jquery-easyui

Usage

To use the EasyUI jQuery Layout Widget, include the required CSS and JavaScript files in your HTML file:

<!-- Required CSS files -->
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<!-- Required JavaScript files -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

Create a container for the layout and add the required HTML elements with the relevant classes for each region:

<div id="layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'south'" style="height:50px"></div>
    <div data-options="region:'west',split:true" style="width:200px"></div>
    <div data-options="region:'east',split:true" style="width:200px"></div>
    <div data-options="region:'center'"></div>
</div>

Initialize the layout using the layout() method and customize the settings as needed:

$(function(){
    $('#layout').layout({
        fit: true
    });
});

Examples

Basic Layout

<div id="layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'south'" style="height:50px"></div>
    <div data-options="region:'west',split:true" style="width:200px"></div>
    <div data-options="region:'east',split:true" style="width:200px"></div>
    <div data-options="region:'center'"></div>
</div>

<script>
    $(function(){
        $('#layout').layout({
            fit: true
        });
    });
</script>

Nested Layout

<div id="layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'south'" style="height:50px"></div>
    <div data-options="region:'west',split:true" style="width:200px">
        <div data-options="region:'north'" style="height:50%"></div>
        <div data-options="region:'south'" style="height:50%"></div>
    </div>
    <div data-options="region:'east',split:true" style="width:200px"></div>
    <div data-options="region:'center'">
        <div data-options="region:'west',split:true" style="width:50%"></div>
        <div data-options="region:'east',split:true" style="width:50%"></div>
    </div>
</div>

<script>
    $(function(){
        $('#layout').layout({
            fit: true
        });
    });
</script>

Collapsible Panels

<div id="layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'south',split:true,collapsed:true" style="height:50px"></div>
    <div data-options="region:'west',split:true,collapsed:true" style="width:200px"></div>
    <div data-options="region:'east',split:true,collapsed:true" style="width:200px"></div>
    <div data-options="region:'center'"></div>
</div>

<script>
    $(function(){
        $('#layout').layout({
            fit: true
        });
    });
</script>

Conclusion

The EasyUI jQuery Layout Widget is a powerful tool for building complex user interfaces. With its flexible and intuitive layout system, developers can create responsive and customizable interfaces in no time.