Как заставить вкладку jQuery UI загружать URL / страницу напрямую?

Question

У меня есть набор вкладок, где href - это URL-адрес, который я хотел бы загрузить при выборе вкладки.

Следуя документам, я добавил следующую опцию выбора.

$('#example').tabs({
 select: function(event, ui) {
 var url = $.data(ui.tab, 'load.tabs');
 if( url ) {
 location.href = url;
 return false;
 }
 return true;
 }
});

в теге <script> вверху каждой страницы (главная страница ASP.NET).

Страница загружается, но вкладка никогда не выбирается визуально, то есть всегда выбирается первая вкладка, даже если отображается содержимое вкладки №3.

При трассировке сценария, описанного выше в FireBug, после выполнения location.href=url новая страница загружается, а оператор возврата никогда не выполняется. Это проблема?

Спасибо

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ Просто хотел уточнить, что я не пытаюсь загрузить контент для вкладки через Ajax, но нужно сделать обратную передачу. В сочетании с обратной передачей я хочу, чтобы выбранная вкладка стала выбранной вкладкой. Также приведенный выше пример взят из Раздела 3.6 на странице jQueryUI / Tabs.

Answer 1

При трассировке приведенного выше сценария в FireBug после выполнения location.href = url загружается новая страница, а операторы return никогда не выполняются.Это проблема?

После того, как вы сделаете location.href=url, вы покидаете страницу, и текущий код перестает выполняться.

Из своего кода вы не можете знать, какая страница является текущей для ее выбора.Вам необходимо добавить селектор CSS к текущему элементу, который указывает на это, или загрузить контент через AJAX.

---

ВЫБРАТЬ ТЕКУЩУЮ Вкладку:

Первое, что вам нужно знать, это какая страница соответствуеткакая вкладка.Поскольку вы не предоставили такую ​​информацию, я просто предположу, что URL имеет параметр tab, который определяет выбранную вкладку.

Вам необходимо предоставить индекс currenttab в ASPX (todo: validate QueryString):

<%= string.Format("var currentTab = {0};", Request.QueryString["tab"]) =>

И в вашем JavaScript используйте этот код:

$('#example').tabs({
  selected: currentTab || 0,
  select: function(event, ui) {
    var url = $.data(ui.tab, 'load.tabs');
    if(url) {
      location.href = url + "?tab=" + ui.index;
      return false;
    }
    return true;
  }
});

Но, пожалуйста:

Обратите внимание, что открытие вкладки в новом окне является неожиданным, например, несовместимымповедение, вызывающее проблему юзабилити (http://www.useit.com/alertbox/tabs.html).

---

ДЛЯ ЗАГРУЗКИ TAB VIA AJAX:

Я не знаю, где можно найти код, который вы разместили в документах jQuery,но это неверно.

В соответствии с документами :

Вкладки поддерживают загрузку содержимого вкладок через Ajax ненавязчивым способом.

HTML-код, который вам нужен, немного отличается от того, который используется для статических вкладок: список ссылок , указывающий на существующие ресурсы (откуда загружается контент) и дополнительных контейнеров вообще нет (ненавязчиво!)Разметка Iners будет создаваться на лету:

Так что HTML должен быть:

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

, а JavaScript должен быть:

$(function() {
  $("#example").tabs();
});