Изменение хеша, но без перемещения страницы с помощью вкладок jquery ui

Я добавил следующий код, чтобы изменить хэш на имя вкладки:

$("#tabs > ul").tabs({ 
select: function(event, ui){ 
window.location.hash = ui.tab.hash; 
} 
} );

Это отлично работает в FF3, но в IE7 он перемещается вниз по странице (в зависимости от выбранной вкладки где-то в верхней части страницы вплоть до самого конца страницы).

Я попытался изменить его на:

$("#tabs > ul").tabs();
$("#tabs > ul").bind("tabsshow", function(event, ui) {
window.location = ui.tab.hash;
})

Это приводит к идентичному поведению как в IE7, так и в FF3, когда страница перемещается вниз в начало выбранной вкладки.

Я бы хотел, чтобы вкладка менялась, хэш обновлялся, но страница не перемещалась вообще, как это работает в FF3 в моем первом примере, но не в IE7.

Спасибо.

Примечания: JQuery 1.3.1/JQuery-UI 1.6rc6


hash jquery-ui
person Rob    schedule 21.02.2009    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Если на странице есть элемент с тем же идентификатором, для которого вы устанавливаете хеш, например, вы пытаетесь установить хэш браузера на #cars, а на странице уже есть div#cars, браузер прокрутите вниз до того места, где находится этот div.

Насколько мне известно, есть 3 возможных обходных пути

1) Измените хэш браузера на что-то другое, например #thecars.

2) Аналогичным образом измените существующую разметку.

3) В некоторых случаях изменение идентификатора вашей разметки с аналогичным названием, затем изменение хэша браузера, а затем изменение имени разметки на исходное значение также теоретически должно работать. Это, очевидно, плохой и медленный обходной путь, просто подумал, что упомяну об этом.

person CPrimer    schedule 13.12.2009

arrow_upward
2
arrow_downward

Вы можете попробовать получить «возврат false»; после того, как вы установите расположение окна, но я не могу быть уверен.

К сожалению, на этом ваши проблемы не закончатся. Существуют и другие проблемы с навигацией взад и вперед в нескольких браузерах — ничего не может измениться, страница может перезагрузиться, состояние страницы может быть искажено, javascript может быть повторно инициализирован и т. д.

Вы можете взглянуть на Tabs v2, в котором используется History/Remote, хотя у него есть не обновлен для jQuery 1.3+.

Эту демонстрацию легче понять. Если вы посмотрите исходный код javascript, вы заметите использование фреймов для обработки состояний.

Существует также плагин History Event и jHistory для достижения того, чего вы хотите.

Хотелось бы услышать, как все получилось и какое решение вы выбрали.

person aleemb    schedule 21.02.2009
comment
Я попробовал вернуть false; как вы предложили, что привело к такому же поведению. Я проверю другие плагины, которые вы упомянули, и продолжу обновлять эту ветку на основе моих результатов. - person Rob; 21.02.2009

arrow_upward
2
arrow_downward

То, что предложил Крис, сработало для меня, я понятия не имел, что даже div может ссылаться через #. Итак, мое решение довольно простое, в обработчике событий show: я делаю следующее, это не идеально, поскольку кнопка «Назад» не будет в истории, но это еще одна работа для плагина истории BBQ. Все мои элементы div просто имеют id="tab-cars", id="tab-trucks"... уберите часть "tab-" и поместите ее в хэш URL.

var name = ui.panel.id.substr(4);
location.hash = '#'+name;
person Andrew Lank    schedule 14.12.2010