JQueryアコーディオンプラグインを使用して、データのアコーディオンを作成しています。次に、ユーザーがさらにデータをアコーディオンに追加できるようにします。アコーディオンを適切に機能するように設定し、アコーディオンのセマンティクスに一致するアコーディオンに「リスト項目」を追加する機能を作成しました。
新しいデータをデータベースに保存してページを更新することなく、新しく追加された要素で動作するようにアコーディオンを「更新」することは可能ですか?
このようなもの:
.accordion('refresh')
または、jQuery 1.3で追加されたライブイベントのように、誰かが手がかりを得ましたか?
私はそれをテストしていませんが、これはおそらく機能するはずです: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" );
このメソッドの詳細については、こちらをご覧ください こちら
新しいセクションを追加し、古いセクションをアクティブに保つには:
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});
Shahzadが前述したように、jQuery UI 1.10はこれを簡単にしました。 ドキュメント を参照してください。
作業用のアコーディオンアイテムを追加/編集/削除する必要があるため、この目的のためにこの小さなJavaScript関数をハッキングしました。
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>
楽しんでください。
LiveQueryプラグインをご覧ください: http://plugins.jquery.com/project/livequery
DOMがロードされた後にイベントとバインディングを追加できます。