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

Question

В моем 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 к внутреннему виду divs работало, но оно перепутало анимацию аккордеона, и добавление его в object_list div ничего не делало.

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

From the docs это звучит, как вам нужно установить

... а также

autoHeight: false 

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

Так что попробуйте это ...

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

Answer 4

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

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

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

Вы можете прочитать в API документации JQuery UI здесь: http://api.jqueryui.com/accordion/#option-heightStyle

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

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

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

Answer 5

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

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

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

для авто размера ваших внутренних дел.

UPDATE:

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

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

Я ЕЩЕ НЕ ПРОВЕРЕНО ЭТО, ПРОСТО НАЙДЕНО И ВЕРНЕТСЯ И УДАЛИТЬ ДАННЫЙ КОММЕНТАРИЙ, когда есть время, чтобы проверить

Answer 6

Установка DIV-х высота сделает трюк.

$(document).ready(function() { 

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

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

Answer 7

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

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

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

Answer 8

для меня делая нижеследующий сработано точно.

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

});

Answer 9

В вашем 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 
}, 

Answer 10

Отключение авто будет работать ... (с любой строкой, кроме автозаполнения или заполнения), например, решение говорит использовать «панель». Но ...

То же, что и в любой строке мусора для "heightStyle". "heightStyle", который вы ищете, это "content".

• http://api.jqueryui.com/accordion/#option-heightStyle
• https://github.com/jquery/jquery-ui/blob/master/tests/unit/accordion/options.js
• https://github.com/jquery/jquery-ui/blob/master/ui/widgets/accordion.js

(значения для варианта "heightStyle" в JQuery UI 1.12)

• "auto": Все панели будут установлены на высоте самой высокой панель.
• "fill": Расширьте доступную высоту, исходя из высоты родителя аккордеона.
• "content": Каждая панель будет только такой же высокой, как и ее содержимое.

Пример: https://jsfiddle.net/qkxyodpq/5/

Надежда, что помогает.