Вкладки jQuery - получение вновь выбранного индекса

Я ранее использовал jquery-ui tabs расширение для загрузки фрагментов страницы через ajax, а также для скрытия или обнаружения скрытых div внутри страницы. Оба эти метода хорошо документированы, и у меня там не было проблем.

Теперь, однако, я хочу сделать что-то другое с вкладками. Когда пользователь выбирает вкладку, он должен полностью перезагрузить страницу - причина этого в том, что содержимое каждой вкладки несколько дороже для рендеринга, поэтому я не хочу просто отправлять их сразу и использовать обычный метод для переключения "display: none", чтобы выявить их.

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

Как в обработчике select я могу получить только что выделенный индекс вкладки и объект html LI, которому он соответствует?

$('#edit_tabs').tabs(  {
        selected: 2,     // which tab to start on when page loads
        select: function(e, ui) {
            var t = $(e.target);
            // alert("data is " +  t.data('load.tabs'));  // undef
            // alert("data is " +  ui.data('load.tabs'));  // undef

            // This gives a numeric index...
            alert( "selected is " + t.data('selected.tabs') )
            // ... but it the index of the PREVIOUSLY selected tab, not the
            // one the user is now choosing.  
            return true;

            // eventual goal is: 
            // ... document.location= extract-url-from(something); return false;
        }
});

Есть ли атрибут объекта или объекта ui, который я могу прочитать, который даст индекс, id или объект только что выбранной вкладки или тега привязки внутри него?

Или есть лучший способ использовать вкладки для перезагрузки всей страницы?

ОТВЕТЫ

Ответ 1

Я бы посмотрел events для вкладок. Из документов jQuery взято следующее:

 $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     ui.options // options used to intialize this widget
     ui.tab // anchor element of the selected (clicked) tab
     ui.panel // element, that contains the contents of the selected (clicked) tab
     ui.index // zero-based index of the selected (clicked) tab
 });

Похоже, ui.tab - это путь.

Ответ 2

в jQuery UI - v1.9.2

ui.newTab.index()

чтобы получить индекс 0 активной вкладки

Ответ 4

спасибо, jobscry - указатель "ui.tab", который вы указали, дал мне тег привязанного клика, из которого я могу извлечь его класс, id, href и т.д. Я решил использовать идентификатор для кодирования моего url. Мой заключительный вызов tabs() выглядит следующим образом:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            // it has an id of "link_foo_bar"
            // transform it into http://....something&cmd=foo-bar
            var url = idToTabURL(ui.tab.id);

            document.location = url;
            return false;
        }
    }).show();
});

Ответ 5

в моей реализации он работает как:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            var url = ui.tab.href;

            document.location = url;
            return false;
        }
    }).show();
});

Ответ 6

Или другой вариант, который я использовал для моего сайта, - это. Его базовая навигационная система UL/Div Tab. Ключ к тому, чтобы запустить правильную вкладку, щелкнув ссылку на другую страницу с прикрепленной меткой хэша, просто фильтрует ваш UL для # примера, который соответствует тому, что передается через браузер. Это так.

Вот пример HTML:

    <div id="tabNav">

  <ul class="tabs">
    <li><a href="#message">Send a message</a></li>
    <li><a href="#shareFile">Share a file</a></li>
    <li><a href="#arrange">Arrange a meetup</a></li>
  </ul>
</div>

<div id="tabCont">

  <div id="message">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="shareFile">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="arrange">
    <p>Ut enim ad minim veniam</p>
  </div>

</div>

И JQuery, чтобы это произошло:

$(document).ready(function() {
$(function () {
    var tabs = [];
    var tabContainers = [];

    $('ul.tabs a').each(function () {
      // note that this only compares the pathname, not the entire url
      // which actually may be required for a more terse solution.
        if (this.pathname == window.location.pathname) {
            tabs.push(this);
            tabContainers.push($(this.hash).get(0));
        }
    });

    $(tabs).click(function () {
        // hide all tabs
        $(tabContainers).hide().filter(this.hash).show();


        // set up the selected class
        $(tabs).removeClass('active');
        $(this).addClass('active');

        return false;

});




 $(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();

  });

});

Это должно позаботиться об этом для вас. Я знаю, что это не самый чистый код, но он будет там.

Ответ 8

Быстрый просмотр документации дает нам решение:

$('#edit_tabs').tabs({ selected: 2 });

Вышеуказанный оператор активирует третью вкладку.