Как вы можете настроить высоту аккордеона jQuery UI? - PullRequest
Новая
       26

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

37 голосов
/ 15 мая 2010

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

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

    // More sections
</div>

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

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

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

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

Ответы [ 10 ]

67 голосов
/ 10 июля 2013

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

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

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

для автоматического определения размера вашего внутреннего div.

UPDATE:

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

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

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

34 голосов
/ 15 мая 2010

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

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

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

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

18 голосов
/ 24 ноября 2010

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

clearStyle: true

... а также 

autoHeight: false

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

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

$( ".selector" ).accordion({ clearStyle: true, autoHeight: false });
15 голосов
/ 26 февраля 2013

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

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

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

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

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

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

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

4 голосов
/ 15 января 2014

Установка высоты DIV сделает свое дело. 

$(document).ready(function() {

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

    $("#accordion div").css({ 'height': 'auto' });
});
2 голосов
/ 02 марта 2018

Отключение auto будет работать ... (с любой строкой, кроме auto или fill), например решение, указывающее использовать "панель". Но ...

Это то же самое, что вставить строку мусора для "heightStyle". "heightStyle", который вы ищете - "content".

(значения для опции "heightStyle" в jQuery UI 1.12)

  • "auto": Все панели будут установлены на высоту самой высокой панели.
  • "fill": увеличить до доступной высоты в зависимости от родительской высоты аккордеона.
  • "content": каждая панель будет иметь высоту только ее содержимого.
* 1 034 * Пример: https://jsfiddle.net/qkxyodpq/5/

Надеюсь, это поможет.

1 голос
/ 17 декабря 2015

В вашем 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
},
0 голосов
/ 21 октября 2014

для меня выполнение следующего работало точно. 

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

});

0 голосов
/ 07 марта 2014

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

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

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

0 голосов
/ 15 мая 2010

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

...