Добавление элементов в jQuery Accordion с помощью jquery - PullRequest
Новая
       26

Добавление элементов в jQuery Accordion с помощью jquery

46 голосов
/ 26 мая 2009

Я использую плагин JQuery для аккордеона, чтобы создать аккордеон для некоторых данных. Затем я хочу, чтобы пользователь мог добавить больше данных в аккордеон. Я настроил аккордеон для правильной работы, затем я создал функцию, которая добавляет «элемент списка» к аккордеону, который соответствует семантике аккордеона.

Можно ли "обновить" аккордеон, чтобы он работал с вновь добавленным элементом, без сохранения новых данных в базе данных и обновления страницы?

Примерно так: 

.accordion('refresh')

Или что-то вроде живого события, добавленного в jQuery 1.3, кто-нибудь получил подсказку?

Ответы [ 5 ]

100 голосов
/ 26 мая 2009

Я не проверял это, но это, вероятно, должно работать: Скажи, что у тебя есть аккордеон с id # accordion 

$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion();

По сути, просто уничтожьте и заново создайте аккордеон.

UPDATE:

С тех пор как был написан этот ответ, в виджет аккордеона был добавлен метод refresh () Его можно вызвать по телефону: 

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

Подробнее об этом методе можно прочитать здесь

8 голосов
/ 24 мая 2012

Чтобы добавить новый раздел и сохранить старый активный: 

var active = $('#accordion').accordion('option', 'active');
$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion({ active: active});
6 голосов
/ 19 февраля 2013

Как упоминалось выше Шахзадом, jQuery UI 1.10 сделал это проще; см. документацию .

0 голосов
/ 13 августа 2012

Так как мне нужны рабочие элементы добавления / редактирования / удаления для аккордеона, я взломал эту маленькую функцию javascript для этой цели

http://jsfiddle.net/Sd6fC/

h3 и div требуется уникальный идентификатор, который соответствует следующему соглашению 

<h3 id="divname_hitm_<uniquenumber>"><h3>

соответствующему div нужно следующее 

<div id="divname_ditm_<samenumber as h3"></div>

образец блока кода аккордеона 

<div id="divname">
    <h3 id="divname_hitm_1><a href="#">Section 1</h3>
    <div id="divname_ditm_1>
        <p>Section 1 Payload</p>
    </div>
    <h3 id="divname_hitm_2><a href="#">Section 2</h3>
    <div id="divname_ditm_2>
        <p>Section 2 Payload</p>
    </div>
</div>

весело проведите время, может, это поможет некоторым людям там!

0 голосов
/ 26 мая 2009

Возможно, вы захотите взглянуть на плагин LiveQuery: http://plugins.jquery.com/project/livequery

Позволяет добавлять события и привязки после загрузки DOM.

...