1

jQuery/jQuery UI は初めてです。ajax経由で動的コンテンツ(temp.html)をロードするページ(sample.html)に複数のタブを作成しようとしています。希望する効果は、選択したタブに応じて temp.html のコンテンツを変更することです。位置を使用して、いくつかのウィジェットを互いに相対的な位置に配置しています。

私が直面している問題は、最初のタブをクリックすると、すべて正常に動作することです。2 番目のタブをクリックすると、配置が機能しません。以下にコードを追加しました。

サンプル.html

$(function() {
   $("#tabs").tabs({
    ajaxOptions : {
      error : function(xhr, status, index, anchor) {
           $(anchor.hash).html("Couldn't load this tab.");
        },
        cache : false
        }
    });
});

<div id="content" class="content">
   <div id="tabs">
    <ul>
      <li><a href="temp.html">Tab 1</a></li>
      <li><a href="temp.html">Tab 2</a></li>
    </ul>
   </div>
</div>

temp.html

#widget1 {
 width: 150px;
 height: 70px;
 top: 20px;
 left: 50px
}

#widget2 {
 width: 150px;
 height: 70px;
}

function resetPositions() {
   $("#widget2").position({
    my : "left top",
    at : "right bottom",
    of : "#widget1",
    offset : "0 50"
    });
   }
$(function() {
  $(".customAccordion").draggable();
  $(".customAccordion").accordion({
    collapsible : true,
    fillSpace : false,
    icons : {
     header : "ui-icon-circle-arrow-e",
     headerSelected : "ui-icon-circle-arrow-s"
    }
 });
 resetPositions();
});

<div id="widget1" class="customAccordion">
  <h3><a href="#">Widget 1</a></h3>
  <div>Widget 1</div>   
</div>
<div id="widget2" class="customAccordion">
 <h3><a href="#">Widget 2</a></h3>
 <div>Widget 2</div>
</div>

私が間違いを犯している場合はお知らせください。

4

1 に答える 1

0

おそらくjQueryUIのトリッキーな部分であるため、タブの前にアコーディオンを初期化する必要があります

$(".customAccordion").accordion();
$("#tabs").tabs();
  • 最初にアコーディオンを削除してみて、それが役立つかどうかを確認してください。
  • 次に、最後にタブを初期化してみてください。

次に、HTMLページをAJAXでロードすると、含まれているJavascriptが実行されることを確認する必要があります...そうでない場合は、その初期化コードをタブのselectイベントに貼り付ける必要があります。

$("#tabs").tabs(
{
    select: function(event,ui)
    {
        // initAccordions();
    }
});
于 2012-08-13T16:26:49.600 に答える