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

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

Переопределить настройки по умолчанию через $.fn.panel.defaults.

Панель используется как контейнер для другого содержимого. Это фундаментальный компонент для построения других компонентов (таких как Layout, Tabs, Accordion и т. д.). Она также предоставляет встроенные возможности сворачивания, закрытия, максимизации, минимизации и другие настраиваемые варианты поведения. Панель можно легко встроить в любое место веб-страницы.

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

Создание панели

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

Создать панель из разметки проще. Добавьте класс 'easyui-panel' к тегу <div>.

<div id="p" class="easyui-panel" title="My Panel"
    style="width:500px;height:150px;padding:10px;background:#FAFAFA;"
    data-options="iconCls:'icon-save',closable:true,
    collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>

2. Создание панели программно

Давайте создадим панель с панелью инструментов в правом верхнем углу.

<div id="p" style="padding:10px;">
    <p>panel content.</p>
    <p>panel content.</p>
</div>
$('#p').panel({
    width:500,
    height:150,
    title:'My Panel',
    tools:[{
    iconCls:'icon-add',
    handler:function(){alert('new')}
    },{
    iconCls:'icon-save',
    handler:function(){alert('save')}
    }]
});

Перемещение панели

Вызовите метод 'move', чтобы переместить панель в новое положение.

$('#p').panel('move',{
    left:100,
    top:100
});

Загрузка содержимого

Давайте загрузим содержимое панели через ajax и отобразим некоторую информацию, когда загрузка завершится успешно.

$('#p').panel({
    href:'content_url.php',
    onLoad:function(){
        alert('loaded successfully');
    }
});

Свойства

Name Type Описание Значение по умолчанию
id string Атрибут id панели. null
title string Текст заголовка, отображаемый в заголовке панели. null
iconCls string CSS-класс, который отображает значок 16x16 в панели. null
width число Установите ширину панели. auto
height число Установите высоту панели. auto
left число Установите левую позицию панели. null
top число Установите верхнюю позицию панели. null
cls string Добавьте CSS-класс к панели. null
headerCls string Добавьте CSS-класс к заголовку панели. null
bodyCls string Добавьте CSS-класс к телу панели. null
style объект Добавьте пользовательские стили к панели.
Пример кода для изменения ширины границы панели:
<div class="easyui-panel" style="width:200px;height:100px"
        data-options="style:{borderWidth:2}">
</div>
{}
fit логическое значение Если установлено значение true, размер панели адаптируется к родительскому контейнеру. Следующий пример демонстрирует панель, которая автоматически изменяет размер до максимального внутреннего размера родительского контейнера.
<div style="width:200px;height:100px;padding:5px">
    <div class="easyui-panel" style="width:200px;height:100px"
            data-options="fit:true,border:false">
        Embedded Panel
    </div>
</div>
false
border логическое значение Определяет, показывать ли границу панели. истина
doSize логическое значение Если задано значение true, при создании панель будет изменена в размере и для неё будет выполнена компоновка. истина
noheader логическое значение Если задано значение true, заголовок панели не будет создан. false
content string Содержимое тела панели. null
collapsible логическое значение Определяет, показывать ли кнопку сворачивания. false
minimizable логическое значение Определяет, показывать ли кнопку минимизации. false
maximizable логическое значение Определяет, показывать ли кнопку развертывания. false
closable логическое значение Определяет, отображать ли кнопку закрытия. false
tools массив, селектор Пользовательские инструменты, возможные значения:
1. Array, каждый элемент содержит два свойства: iconCls и handler.
2. Selector, указывающий инструменты.

Инструменты панели можно объявить через существующий тег <div>:
<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
    <a href="../index.html" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="../index.html" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>
Инструменты панели можно задать через массив:
<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:[
                {
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },{
                    iconCls:'icon-edit',
                    handler:function(){alert('edit')}
                }]">
</div>
[]
collapsed логическое значение Определяет, должна ли панель быть изначально свёрнутой. false
minimized логическое значение Определяет, должна ли панель быть изначально минимизированной. false
maximized логическое значение Определяет, должна ли панель быть изначально развёрнутой. false
closed логическое значение Определяет, закрыта ли панель изначально. false
href string URL-адрес, используемый для загрузки удалённых данных и отображения их в панели. Обратите внимание, что содержимое не будет загружено, пока панель не открыта. Это полезно для создания панели с ленивой загрузкой:
<div id="pp" class="easyui-panel" style="width:300px;height:200px"
        data-options="href='get_content.php.html',closed:true">
</div>
<a href="../index.html" onclick="javascript:$('#pp').panel('open')">Open</a>
null
cache логическое значение Установите true, чтобы кэшировать содержимое панели, загруженное из href. истина
loadingMessage string Показывать сообщение в панели при загрузке удалённых данных. Загрузка…
extractor функция Определяет, как извлекать содержимое из ответа ajax, возвращая извлечённые данные.
extractor: function(data){
    var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
    var matches = pattern.exec(data);
    if (matches){
        return matches[1];    // only extract body content
    } else {
        return data;
    }
}

Events

Name Parameters Описание
onLoad none Срабатывает при загрузке удалённых данных.
onBeforeOpen none Срабатывает перед открытием панели; верните false, чтобы предотвратить её открытие.
onOpen none Срабатывает после открытия панели.
onBeforeClose none Срабатывает перед закрытием панели; верните false, чтобы отменить закрытие. Панель, объявленная ниже, не закроется.
<div class="easyui-panel" style="width:300px;height:200px;"
        title="My Panel" data-options="onBeforeClose:function(){return false}">
    The panel cannot be closed.
</div>
onClose none Срабатывает после закрытия панели.
onBeforeDestroy none Срабатывает перед уничтожением панели; верните false, чтобы отменить уничтожение.
onDestroy none Срабатывает после уничтожения панели.
onBeforeCollapse none Срабатывает перед сворачиванием панели; верните false, чтобы остановить сворачивание.
onCollapse none Срабатывает после сворачивания панели.
onBeforeExpand none Срабатывает перед развёртыванием панели; верните false, чтобы остановить развёртывание.
onExpand none Срабатывает после развёртывания панели.
onResize width, height Срабатывает после изменения размера панели.
width: новая внешняя ширина
height: новая внешняя высота
onMove left,top Срабатывает после перемещения панели.
left: новая левая позиция
top: новая верхняя позиция
onMaximize none Срабатывает после развёртывания окна.
onRestore none Срабатывает после восстановления окна до исходного размера.
onMinimize none Срабатывает после сворачивания окна.

Методы

Name Parameters Описание
options none Возвращает свойство options.
panel none Возвращает объект внешней панели.
header none Возвращает объект заголовка панели.
body none Возвращает объект тела панели.
setTitle title Устанавливает текст заголовка.
open forceOpen Если для параметра forceOpen задано значение true, открывает панель в обход функции обратного вызова onBeforeOpen.
close forceClose Если для параметра forceClose задано значение true, закрывает панель в обход функции обратного вызова onBeforeClose.
destroy forceDestroy Когда параметр forceDestroy установлен в true, уничтожает панель в обход функции обратного вызова onBeforeDestroy.
refresh href Обновляет панель для загрузки удалённых данных. Если задан параметр 'href', он переопределит старое свойство 'href'.
Пример кода:
// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');
// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');
resize options Задаёт размер панели и выполняет компоновку. Объект Options содержит следующие свойства:
width: новая ширина панели
height: новая высота панели
left: новая позиция панели слева
top: новая позиция панели сверху

Пример кода:
$('#pp').panel('resize',{
    width: 600,
    height: 400
});
move options Перемещает панель в новую позицию. Объект Options содержит следующие свойства:
left: новая позиция панели слева
top: новая позиция панели сверху
maximize none Панель адаптируется к размеру своего контейнера.
minimize none Свернуть панель.
восстановить none Восстановить развёрнутую панель до исходного размера и положения.
collapse animate Свернуть тело панели.
expand animate Развернуть тело панели.
jQuery EasyUI 插件Плагины jQuery EasyUI Другие расширения