История кнопок jQuery UI

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

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

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

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

Ответы

Ответ 1

Я тоже столкнулся с этим. Его очень легко с плагином адресов jquery здесь 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;
    })
});

Ответ 2

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

Ответ 3

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

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

Если вы используете JQuery Address 'externalChange, а не просто "change", это предотвращает отправку лишнего запроса (в моем случае это приводит к ошибке в консоли javascript). Это связано с тем, что если кто-то нажимает на вкладку, адрес изменяется сам по себе (благодаря jquery ui), thsi меняет триггеры $.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), тогда запускается внешнее изменение (по окну. location.hash = значение)

Ответ 4

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

Ответ 6

Этот jQuery История/Удаленный плагин. Создатели плагинов Tabs и History/Remote - это один и тот же человек, и они работают вместе здесь.