Docking layout manager

联合创作 · 2023-10-02 15:27

This allow you to dock a HTML element like DIV. Docking concept is similar to the Microsoft style docking, where you can dock to Top, Left, Fill, Right and Bottom side of a web page.

Usage

     var layoutSettings =
    {
        Name    :   "Main",
        Dock    :   $.layoutEngine.DOCK.FILL,
        EleID   :   "main",
        Margin  :   5,
        Children:   [
                        {
                            Name    :   "Top",
                            Dock    :   $.layoutEngine.DOCK.TOP,
                            EleID   :   "top",
                            Margin  :   5,
                            Height  :   125
                        },
                        {
                            Name    :   "Left",
                            Dock    :   $.layoutEngine.DOCK.LEFT,
                            EleID   :   "left",
                            MarginLeft  :   5,
                            MarginRight  :   5,
                            Width   :   300
                        },
                        {
                            Name    :   "Fill",
                            Dock    :   $.layoutEngine.DOCK.FILL,
                            EleID   :   "fill",
                            Margin  :   0
                        },
                        {
                            Name    :   "Right",
                            Dock    :   $.layoutEngine.DOCK.RIGHT,
                            EleID   :   "right",
                            MarginLeft  :   5,
                            MarginRight  :   5,                            
                            Width   :   200
                        },
                        {
                            Name    :   "Bottom",
                            Dock    :   $.layoutEngine.DOCK.BOTTOM,
                            EleID   :   "bottom",
                            Margin  :   5,
                            Height  :   125
                        }
                    ]
             
    };
    
    $.layoutEngine(layoutSettings);