Как вы можете настроить высоту аккордеона UQuery UI?

В моем пользовательском интерфейсе у меня есть настройка аккордеона:

<div id="object_list">
    <h3>Section 1</h3>
    <div>...content...</div>

    // More sections
</div>

Аккордеон работает правильно, когда он сначала формируется, и, похоже, он хорошо настраивается для содержимого внутри каждого из разделов. Однако, если я затем добавляю больше контента в аккордеон после вызова .accordion() (через ajax), внутренняя часть раздела заканчивается переполнением.

Поскольку аккордеон формируется практически без содержимого, все внутренние divs чрезвычайно малы, и, таким образом, содержимое переполняется, и вы получаете аккордеоны с полосами прокрутки внутри, почти без области просмотра.

Я попытался добавить стили min-height в div object_list, а div div содержимого - безрезультатно. Добавление min-height к внутреннему типу обработанного, но оно перепутало аккордеонные анимации, и добавление его в object_list div ничего не делало.

Как я могу получить разумный размер из разделов контента, даже если для заполнения этих разделов недостаточно контента?

Ответы

Ответ 1

Когда вы объявляете элемент управления аккордеона, вы можете поместить высоту в тег стиля для div. Затем вы можете установить свойство fillSpace: true, чтобы заставить элемент управления аккордеоном заполнить это пространство Div независимо от того, что. Это означает, что вы можете установить высоту в соответствии с тем, что лучше всего подходит для вашей страницы. Затем вы можете изменить высоту div при добавлении кода

Если вы хотите, чтобы аккордеон динамически изменял размер содержимого, содержащегося в нем, вы можете сделать следующий трюк размещенный на веб-сайте jQuery UI.

//getter
var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
//setter
$( ".selector" ).accordion( "option", "autoHeight", false );

Это означает, что при выборе области с большим количеством текста аккордеон пересчитает ее.

Ответ 2

autoHeight устарел в 1.9 и удален в 1.10.

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

$('#id').accordion({heightStyle: 'content'});

чтобы авто размер вашего внутреннего div.

UPDATE:

Я вижу, что это все еще довольно активный пост, поэтому я решил убедиться, что мой ответ по-прежнему действителен. Похоже, что это может больше не работать в пользовательском интерфейсе jQuery 1.11. Он отмечает, что свойство [content] устарело, и вместо этого использовать [панель]. Создание фрагмента кода теперь выглядит примерно так:

$('#id').accordion({heightStyle: 'panel'});

Я НЕ ИСПЫТАЛ ЭТО, ТОЛЬКО НАЙДЕНЫ, И ВОЗВРАЩАЮТСЯ И УДАЛЯЮТ ДАННЫЙ КОММЕНТАРИЙ, КОГДА Я ИМЕЮТ ВРЕМЯ ИСПЫТАТЬ

Ответ 3

Из документов кажется, что вам нужно установить

clearStyle: true

... а также

autoHeight: false

Я считаю, что использование clearStyle позволяет динамически добавлять контент, не мешая Accordion.

Итак, попробуйте это...

$( ".selector" ).accordion({ clearStyle: true, autoHeight: false });

Ответ 4

Похоже, что все ответы здесь используют устаревшие параметры.

С последней версией jQuery UI (1.10.x) вы должны инициализировать свой аккордеон с помощью heightStyle: "fill", чтобы получить предполагаемый эффект.

$(".selector").accordion({ heightStyle: "fill" });

Подробнее о документах API jQuery API можно прочитать здесь: http://api.jqueryui.com/accordion/#option-heightStyle

Если ваши параметры страницы изменяются динамически, и вам нужно пересчитать размер аккордеона, вы должны обновить свой аккордеон, используя метод refresh:

$(".selector").accordion("refresh");

Это предпочтительнее, поскольку метод resize теперь устарел.

Ответ 5

Настройка высоты DIV сделает трюк.

$(document).ready(function() {

    $("#accordion").show().accordion({
        autoHeight: false
    });

    $("#accordion div").css({ 'height': 'auto' });
});

Ответ 6

В вашем jquery-ui.js найдите следующий раздел и измените heightstyle: "auto" на heightstyle: "content", чтобы обновленный файл выглядел следующим образом.

var accordion = $.widget( "ui.accordion", {
  version: "1.11.4",
  options: {
    active: 0,
    animate: {},
    collapsible: false,
    event: "click",
    header: "> li > :first-child,> :not(li):even",
    heightStyle: "content",
    icons: {
        activeHeader: "ui-icon-triangle-1-s",
        header: "ui-icon-triangle-1-e"
    },

    // callbacks
    activate: null,
    beforeActivate: null
},

Ответ 7

Просто вызовите метод аккордеонов .resize(), это будет пересчитывать его размер. http://docs.jquery.com/UI/Accordion#method-resize

Ответ 8

Недавно я настроил аккордеон, который извлекает содержимое через ajax при активации вкладки и сталкивается с той же проблемой. Я попытался использовать некоторые из предложений, размещенных здесь, но они никогда не поднимали панель правильно, пока я не установил heightStyle в контент.

$("#myaccordion").accordion({
  heightStyle: "content",
  activate: function(event ui) {
    //use ajax to retrieve content here.
  }
});

Я использую jQuery-UI версии 1.10.4.

Ответ 9

чтобы я выполнял точно выполненную работу.

$( "#accordion" ).accordion({
    autoHeight: false,

});