Вкладки пользовательского интерфейса JQuery - загрузка содержимого вкладки AJAX

Question

Все,

Я использую вложенные вкладки пользовательского интерфейса JQuery.Рассмотрим структуру следующим образом: Есть 2 основных вкладки: Животные, Птицы.В разделе «Животные» есть две вкладки «Кошки», «Собаки».Обе вкладки "Кошки" и "Собаки" должны быть загружены через AJAX при выборе. Итак, код для них выглядит примерно так:

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab" title="Cats"><span>Cats</span></a></li>
       <li><a href="/public/dogstab" title="Dogs"><span>Dogs</span></a></li>
    </ul>  
</div>

<script type="text/javascript">
$(document).ready(function()
{
    $("#tabs-loading-message").show();
    $('#fragment-1').tabs({cache:false, spinner:''});
});
</script>

Проблема в том, что я хочу поддерживать общий divзагрузить URL-адреса AJAX.Пример: когда вы нажимаете на Cats или Dogs, содержимое этих вкладок должно переходить в "<div id='commonDiv'></div>, а не в "cats" div и "dogs" div.Загрузка должна быть многоразовой, в том смысле, что если вы вызываете reload("Dogs") из любой точки вкладки "dogs", она должна перезагрузить содержимое вкладки "dogs".

Как мне этого добиться?

Answer 1

Просто глядя на документы, ничего не появляется о том, как это сделать. Однако достаточно просто не использовать виджет вкладок и определять собственные события щелчка для основных функций вкладок.

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab" title="Cats"><span>Cats</span></a></li>
       <li><a href="/public/dogstab" title="Dogs"><span>Dogs</span></a></li>
    </ul>  
    <div id="commonDiv"></div>
</div>

$(document).ready(function(){
   $('#fragment-1 a').click(function(){
      $('#commonDiv').load($(this).attr('href'));
   });
}):

Однако вам нужно будет определить свои собственные стили CSS, поскольку виджет вкладок делает это за вас.

Answer 2

Не уверен, хорошо ли я вас понял; Насколько я знаю, если вы дадите всем своим вкладкам один и тот же атрибут tittle, пользовательский интерфейс будет повторно использовать один и тот же DIV для загрузки содержимого, вместо того, чтобы создавать новый для каждой вкладки и скрывать или показывать по мере необходимости. Это хорошо, поскольку браузер не так сильно нагружен большим количеством DIVS, загруженных, но скрытых ...