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

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

0 голосов
/ 02 февраля 2010

Все,

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

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab"><span>Cats</span></a></li>
       <li><a href="/public/dogstab"><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>

Когда я переключаю вкладки на "Собаки", я заметилчто HTML-код, созданный для вкладки «Кошки», все еще существует на странице (в скрытом состоянии, но все еще доступен) и наоборот.Так что, если на обеих вкладках есть общие элементы, это будет проблемой .. Как я могу исправить это так, чтобы был только один пустой элемент Div, и он загружался и перекрашивался с любой вкладкой, которая в данный момент загружается или переключается?

Ответы [ 2 ]

0 голосов
/ 03 февраля 2010

Я ответил что-то похожее. Код из этой записи загружает содержимое в контейнер содержимого при нажатии на вкладку. Надеюсь, это поможет вам двигаться в правильном направлении.

0 голосов
/ 03 февраля 2010

Хм ... Я могу ошибаться, но я подумал, что вам нужны div-заполнители для содержимого вкладок каждой вкладки, даже если каждая вкладка была загружена динамически.Вот так: 

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab#cats"><span>Cats</span></a></li>
       <li><a href="/public/dogstab#dogs"><span>Dogs</span></a></li>
    </ul>  
    <div id="cats"></div> <-- this is placeholder div
    <div id="dogs"></div>
</div>

Обратите внимание на дополнительные идентификаторы '#' в конце URL.

...