1

タブと組み合わせたtwitter-bootstrapナビゲーションバーを使用して、ajax経由でフォームをロードしています(フォームを提供するためにDjangoを使用しています)

<ul class="nav nav-pills" id="tabs">
    <li><a href="#form1" data-toggle="tab">Form1</a></li>
    <li><a href="#form2" data-toggle="tab">Form2</a></li>
    <li><a href="#form3" data-toggle="tab">Form3</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane" id="form1" data-src="{% url form1 %}"></div>
    <div class="tab-pane" id="form2" data-src="{% url form2 %}"></div>
    <div class="tab-pane" id="form3" data-src="{% url form3 %}"></div>
</div>

これはjqueryと結合します:

$('#tabs').bind('show', function(element) {
  paneID = $(element.target).attr('href');
  src = $(paneID).attr('data-src');
  $(paneID).load(src);
});

まず、これは悪い考えなのだろうかと思う部分があります。理由は思いつきませんが、誰かがこの方法に欠点があるかどうかを指摘できれば幸いです。

次に、タブから移動するときに、そのタブのコンテンツに対して「onunload」イベントをトリガーしたいと考えています。しかし、タブから移動したときにタブからデータを「アンロード」する方法が見つからないようです。

$('#tabs').bind('hide', function(element) {
  doStuff();
});

どうやら有効ではありません。ヘルプ/ガイダンスをいただければ幸いです。

4

1 に答える 1