История кнопок вкладок пользовательского интерфейса jQuery - PullRequest
Новая
       79

История кнопок вкладок пользовательского интерфейса jQuery

33 голосов
/ 02 мая 2009

Кто-нибудь смог заставить jQuery UI Tabs 3 (последняя версия) работать с кнопкой назад?

Я имею в виду, если пользователь нажимает кнопку "Назад", он должен перейти на ранее посещенную вкладку на странице, а не на другую страницу.

Плагин истории звучит так, как будто он может работать, но я не могу заставить его работать Загруженные вкладки ajax.

Если кому-то удалось сделать эту работу, это было бы очень признательно, спасибо!

Ответы [ 7 ]

38 голосов
/ 26 июля 2010

Я тоже столкнулся с этим. Это действительно легко с плагином jquery address здесь http://www.asual.com/jquery/address/

Демонстрация для вкладок казалась немного более сложной. Я просто сделал это: 

$('document').ready(function() {
    // For forward and back
    $.address.change(function(event){
      $("#tabs").tabs( "select" , window.location.hash )
    })

    // when the tab is selected update the url with the hash
    $("#tabs").bind("tabsselect", function(event, ui) { 
      window.location.hash = ui.tab.hash;
    })
});
9 голосов
/ 02 мая 2009

Я бы посоветовал взглянуть на это: http://www.asual.com/jquery/address/ это позволяет вам делать глубокие ссылки вместе с вашими вызовами AJAX.

3 голосов
/ 26 февраля 2011

Обновление: Решение, которое я опубликовал, не решает проблему, которую я описал, ^^ будет публиковаться снова, если я вспомню, когда решу ее. Обновление 2: я "решил" проблему на данный момент (см. Ниже).

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

Если вы используете событие externalChange Jquery Address вместо «change», это предотвращает отправку лишнего запроса (в моем случае это приводит к ошибке в консоли javascript). Это потому, что если кто-то нажимает на вкладку, адрес меняется самостоятельно (благодаря jquery ui), это изменение вызывает $ .address.change один раз, что выбирает вкладку, даже если jquery-ui уже сделал это ... По крайней мере, я Подумай вот что.

Также мне не понравились вкладки, создающие хэши, такие как "# ui-tab-2", "# ui-tab-3" и т. Д., Поэтому я использовал следующий код, который заставляет URL использовать имена элементов привязки как хэши (то есть "www.example.com # cool_stuff" вместо "www.example.com # ui-tab-2"): 

$(function() {
  $( "#tabs" ).tabs({
    cache: false,
  });

  // For forward and back
  $.address.externalChange(function(event){
    var name = window.location.hash != "" ? window.location.hash.split("#")[2] : ""
    $("#tabs").tabs( "select" , $("#tabs a[name="+ name + "]").attr('href') )
  });
  // when the tab is selected update the url with the hash
  $("#tabs").bind("tabsselect", function(event, ui) { 
    $.address.hash(ui.tab.name);
  });

});

Однако, A) Я новичок в jquery и не уверен, что это эффективно / безопасно / «Правильный способ сделать это», и B) Обязательно используйте это, только если вы можете быть уверены, что атрибут «name» из якорей нет символов, которые не являются безопасными URI (то есть пробел).

Update2: я «решил» проблему в Update1, но у него ужасно страшная строка: 

var name = window.location.hash != "" ? window.location.hash.split("#")[2] : ""

Поскольку, очевидно, функция $ .address.hash (val) добавляет «/ #» после первого хеша, но если мы не используем $ .address.hash (val), то externalChange срабатывает (по окну. location.hash = значение)

2 голосов
/ 27 сентября 2010

Я сейчас использую этот плагин: http://flowplayer.org/tools/demos/tabs/ajax-history.htm

2 голосов
/ 02 мая 2009

Может показаться, что поддержка кнопки возврата в настоящее время не встроена во вкладки пользовательского интерфейса jQuery: http://jqueryui.com/demos/tabs/#Back_button_and_bookmarking

1 голос
/ 02 мая 2009

Плагин jQuery History / Remote делает это. Создатели плагинов Tabs и History / Remote - это одно и то же лицо, и они работают вместе здесь .

0 голосов
/ 14 февраля 2019

Вы можете обратиться к ссылке кнопки, открывающей вкладку, и записать ее в историю. После этого добавьте "EventListener" мы отслеживаем с его помощью изменение «window.location.hash» и при любом изменении искусственно нажимаем кнопку с такой ссылкой Таким образом, переходы в истории с помощью кнопки назад будут работать. 

$(".btn").click(
        function () {
            window.location = this.href;
        });
    window.addEventListener('hashchange', function () {
        var x = `[href="${window.location.hash}"]`;
        $(x)[0].click();
    });
...