web-dev-qa-db-ja.com

jqueryを使用してjQueryアコーディオンにアイテムを追加する

JQueryアコーディオンプラグインを使用して、データのアコーディオンを作成しています。次に、ユーザーがさらにデータをアコーディオンに追加できるようにします。アコーディオンを適切に機能するように設定し、アコーディオンのセマンティクスに一致するアコーディオンに「リスト項目」を追加する機能を作成しました。

新しいデータをデータベースに保存してページを更新することなく、新しく追加された要素で動作するようにアコーディオンを「更新」することは可能ですか？

このようなもの：

.accordion('refresh')

または、jQuery 1.3で追加されたライブイベントのように、誰かが手がかりを得ましたか？

ajaxjquery-uijquery-ui-accordion
46
espenhogbakk

私はそれをテストしていませんが、これはおそらく機能するはずです：ID #accordionのアコーディオンがあるとしましょう

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

基本的に、アコーディオンを破壊して再作成するだけです。

UPDATE：

この答えが書かれて以来、refresh（）メソッドがアコーディオンWidgetに追加されました。以下を呼び出すことで呼び出すことができます。

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

このメソッドの詳細については、こちらをご覧ください こちら

100
Jimmy Stenke

新しいセクションを追加し、古いセクションをアクティブに保つには：

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});
8
Wesley

Shahzadが前述したように、jQuery UI 1.10はこれを簡単にしました。 ドキュメント を参照してください。

6
Mark D.

作業用のアコーディオンアイテムを追加/編集/削除する必要があるため、この目的のためにこの小さなJavaScript関数をハッキングしました。

http://jsfiddle.net/Sd6fC/

h3とdivには、次の規則に従う一意のIDが必要です

<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
Tak0r

LiveQueryプラグインをご覧ください： http://plugins.jquery.com/project/livequery

DOMがロードされた後にイベントとバインディングを追加できます。

0
jfrobishow