jQuery EasyUI Layout -Создание сложных макетов в панелях

Панель позволяет создавать пользовательские макеты для различных целей. В этом примере мы используем плагины Panel и Layout, чтобы создать окно сообщений MSN.

Мы используем несколько макетов в панелях регионов. В верхней части окна сообщений мы размещаем поле ввода запроса, а с правой стороны размещаем изображение человека. В средней области мы устанавливаем свойство split в true, чтобы разделить эту часть на две части, что позволяет пользователям изменять размер панелей регионов.

Ниже приведён весь код:

    <div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
        <div class="easyui-layout" fit="true">
            <div region="north" border="false" class="p-search">
                <label>Search:</label><input></input>
            </div>
            <div region="center" border="false">
                <div class="easyui-layout" fit="true">
                    <div region="east" border="false" class="p-right">
                        <img src="images/msn.gif.html"/>
                    </div>
                    <div region="center" border="false" style="border:1px solid #ccc;">
                        <div class="easyui-layout" fit="true">
                            <div region="south" split="true" border="false" style="height:60px;">
                                <textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
                            </div>
                            <div region="center" border="false">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

Нам не нужно писать код на JavaScript; у него очень мощные возможности для проектирования пользовательских интерфейсов.

Скачать примеры jQuery EasyUI

jeasyui-layout-panel.zip