it-swarm.com.ru

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

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

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

Мой план состоит в том, чтобы перехватить событие 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;
        }
});

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

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

26
Matt Hucke

Я хотел бы взглянуть на события для вкладок. Следующее взято из документов 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 - это путь.

37
imjoevasquez

в jQuery UI - v1.9.2

ui.newTab.index()

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

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

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

5
user376026

спасибо, jobscry - «ui.tab», на который вы указали, дал мне тег привязанного клика, из которого я могу извлечь его класс, id, href и т. д. Я решил использовать id для кодирования моего 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();
});
0
Matt Hucke

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

Надеюсь, что это помогает кому-то ..

0
Ekta

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

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

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

Вот пример 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();

  });

});

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

0
Wes

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

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

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

0
Yasser