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

Question

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

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

Мой план состоит в том, чтобы перехватить событие tabs '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's 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 объект, который я могу прочитать, что даст индекс, идентификатор или объект на вкладке вновь выбранной или тега привязки в нем?

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

Answer 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 это путь.

Answer 2

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

$(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(); 
}); 

Answer 3

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

$(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(); 
}); 

Answer 4

Или другой вариант я использовал для моего сайта это. Его базовая навигационная система 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(); 

    }); 

}); 

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

Answer 5

select: function(e, ui){var index=ui.index;} 

хорошо подходит для меня. см: http://api.jqueryui.com/tabs/#events

Answer 6

я нашел два пути для выполнения этого требования, так как это трудно для меня, чтобы поместить код здесь, вы можете посмотреть на него на http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

Надежда, что помогает кому-то ..

Answer 7

Беглый взгляд в документации дает нам решение:

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

Данное заявление будет активировать вкладку третьего.

Answer 8

в JQuery UI - v1.9.2

ui.newTab.index() 

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