Плагин компоновки jQuery EasyUI -Accordion

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

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

Аккордеон позволяет разместить несколько панелей и отображать одну или несколько панелей одновременно. Каждая панель имеет встроенную поддержку развёртывания и сворачивания. Щелчок по заголовку панели разворачивает или сворачивает тело панели. Содержимое панели можно загрузить через ajax, указав атрибут 'href'. Пользователь может определить выбранную панель. Если не указано, по умолчанию выбирается первая панель.

Зависимости

  • panel

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

Создать аккордеон

Создайте аккордеон из разметки, добавив класс 'easyui-accordion' к тегу <div>.

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

Мы можем изменить некоторые возможности после изменения или пересоздания аккордеона.

$('#aa').accordion({
    animate:false
});

Обновление содержимого панели аккордеона

Вызовите метод 'getSelected', чтобы получить текущую панель, затем можно вызвать метод 'refresh' панели, чтобы загрузить новое содержимое.

var pp = $('#aa').accordion('getSelected'); // 获取选中的面板（panel）
if (pp){
    pp.panel('refresh','new_content.php'); // 调用 'refresh' 方法加载新内容
}

Параметры контейнера

Name Type Описание Значение по умолчанию
width число Ширина контейнера аккордеона. auto
height число Высота контейнера аккордеона. auto
fit логическое значение Установите значение true, чтобы размер контейнера аккордеона соответствовал его родительскому контейнеру. false
border логическое значение Определяет, показывать ли границу. истина
animate логическое значение Определяет, показывать ли анимационные эффекты при раскрытии или сворачивании панели. истина
multiple логическое значение Установите значение true, чтобы разрешить одновременное раскрытие нескольких панелей. Это свойство доступно начиная с версии 1.3.5. false
selected число Индекс изначально выбранной панели. Это свойство доступно начиная с версии 1.3.5. 0

Параметры панели

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

Name Type Описание Значение по умолчанию
selected логическое значение Установите значение true, чтобы развернуть панель. false
collapsible логическое значение Определяет, показывать ли кнопку сворачивания. Если задано false, панель нельзя развернуть/свернуть щелчком. истина

Events

Name Parameters Описание
onSelect title,index Срабатывает при выборе панели.
onUnselect title,index Срабатывает при снятии выбора с панели. Это событие доступно начиная с версии 1.3.5.
onAdd title,index Срабатывает при добавлении новой панели.
onBeforeRemove title,index Срабатывает перед удалением панели. Верните false, чтобы отменить действие удаления.
onRemove title,index Срабатывает при удалении панели.

Методы

Name Parameters Описание
options none Возвращает опции аккордеона.
panels none Получает все панели.
resize none Изменяет размер аккордеона.
getSelected none Получает первую выбранную панель.
getSelections none Получает все выбранные панели. Этот метод доступен начиная с версии 1.3.5.
getPanel which Получает указанную панель. Параметр 'which' может быть заголовком или индексом панели.
getPanelIndex panel Получает индекс указанной панели. Этот метод доступен начиная с версии 1.3.
В приведённом ниже примере показано, как получить индекс выбранной панели.
var p = $('#aa').accordion('getSelected');
if (p){
    var index = $('#aa').accordion('getPanelIndex', p);
    alert(index);
}
select which Выбирает указанную панель. Параметр 'which' может быть заголовком или индексом панели.
unselect which Отменяет выбор указанной панели. Параметр 'which' может быть заголовком или индексом панели. Этот метод доступен начиная с версии 1.3.5.
добавьте options Добавляет новую панель. По умолчанию вновь добавленная панель будет выбрана. Чтобы добавить новую панель, которая не выбрана, передайте свойство 'selected' и установите его в false.
Пример кода:
$('#aa').accordion('add', {
    title: 'New Title',
    content: 'New Content',
    selected: false
});
remove which Удаляет указанную панель. Параметр 'which' может быть заголовком или индексом панели.
jQuery EasyUI 插件Плагины jQuery EasyUI Другие расширения