Плагин макета jQuery EasyUI -Layout

jQuery EasyUI 插件jQuery EasyUI Плагины

Переопределите значения по умолчанию через $.fn.layout.defaults.

Макет — это контейнер с пятью областями (north, south, east, west и center). Панель области center обязательна, а панели краевых областей необязательны. Каждую панель краевой области можно изменять в размере, перетаскивая её границу, а также сворачивать, щёлкая по триггеру сворачивания. Макеты можно вкладывать друг в друга, поэтому пользователи могут создавать сложные макеты.

Зависимости

  • panel
  • resizable

Использование

Создание макета

1. Создайте макет с помощью разметки.

Добавьте класс 'easyui-layout' к тегу <div>.

<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',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',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>
</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>

4. Загрузите содержимое через ajax.

Макет создаётся на основе панели. Каждая панель области имеет встроенную поддержку динамической загрузки содержимого из URL. Используя динамическую загрузку, пользователи могут ускорить отображение страниц макета.

<body class="easyui-layout">
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
    <div data-options="region:'center',href:'center_content.php'" ></div>
</body>

Свернуть панель макета

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

Добавьте панель западной области с кнопкой инструмента

$('#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')}
    }]
});

Параметры макета

Name Type Описание Значение по умолчанию
fit логическое значение Если установлено значение true, размер макета устанавливается по размеру его родительского контейнера. При создании макета для тега 'body' он автоматически разворачивается на весь размер страницы. false

Параметры панели области

Параметры панели области определяются в компоненте panel. Ниже приведены некоторые общие и новые свойства:

Name Type Описание Значение по умолчанию
title string Текст заголовка панели макета. null
region string Определяет положение панели макета. Его значение — одно из следующих: north, south, east, west, center.
border логическое значение Если установлено значение true, отображается граница панели макета. истина
split логическое значение Если установлено значение true, отображается разделительная полоса, с помощью которой пользователи могут изменять размер панели. false
iconCls string CSS-класс, который отображает значок в заголовке панели. null
href string URL-адрес для загрузки данных с удалённого сайта. null
collapsible логическое значение Определяет, отображается ли кнопка сворачивания. истина
minWidth число Минимальная ширина панели. 10
minHeight число Минимальная высота панели. 10
maxWidth число Максимальная ширина панели. 10000
maxHeight число Максимальная высота панели. 10000

Методы

Name Параметр Описание
resize none Установить размер макета.
panel region Возвращает указанную панель. Возможные значения параметра 'region': 'north', 'south', 'east', 'west', 'center'.
collapse region Свернуть указанную панель. Возможные значения параметра 'region': 'north', 'south', 'east', 'west'.
expand region Развернуть указанную панель. Возможные значения параметра 'region': 'north', 'south', 'east', 'west'.
добавьте options Добавить указанную панель. Параметр options — это объект конфигурации. Подробнее см. свойства панели вкладок.
remove region Удалить указанную панель. Возможные значения параметра 'region': 'north', 'south', 'east', 'west'.
jQuery EasyUI 插件Плагины jQuery EasyUI Другие расширения