2013-05-13 4 views
1

Я ищу, чтобы создать страницу, которая позволяет использовать кнопки назад и вперед для содержимого на странице. Я выполнил основные функциональные возможности, используя JQuery адрес, как представлено наjQuery in page back button scrolling

  • http://www.asual.com/jquery/address

Проблема, которую я имею, как получить функцию обратного вызова для работы в координация с плагином jQuery scrollTo для обеспечения анимированного назад и перемотки вперед.

//Navigation between slides 
$('.nav-button').click(function(e) { 
    e.preventDefault(); 
    $.scrollTo($(this).attr('href'), 'slow', {easing:'easeInOutExpo'}); 
}); 

//Storage and activation of back and forwards attributes 
$('a').click(function() { 
    $.address.value($(this).attr('href')); 
}); 

//Callback to scroll on back or forwards 
//NEED HELP HERE 
$.address.change(function(event) { 
    $.scrollTo(event.value(), 'slow', {easing:'easeInOutExpo'}); 
}); 

Как я уверен, вы можете увидеть проблему реально не так сложно, но так как я все еще учусь она выходит за рамки моих знаний. Буду признателен за любую оказанную помощь.

Все содержание содержится в одной странице, разделенной на различные «страницы» с использованием различных Div элементов с общим классом

UPDATE:

Я создал скрипку, чтобы отобразить вопрос более четко.

jsfiddle.net/d7uZ7/6

В нижней части JQuery является то, что будет использоваться для запуска прокрутки после задней или вперед страницы события

РЕШЕНИЕ:

Так после долгого сражения с этим было найдено решение (сорта). Кроме того, я не должен, чтобы без чата с JacobMcLock ничего из этого не было бы возможно.

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

//Method 1 
$.address.change(function (event) { 
    var value = event.value, 
    i = value.indexOf('#'), 
    $element = (i === -1) ? $("body") : $(value.substr(i, value.length-1)); 
    $.scrollTo($element, 'slow', {easing:'easeInOutExpo'}); 
}); 

//Method 2 
$(window).on('hashchange', function(event) { 
    event.preventDefault(); 
    $.address.change(function (event) { 
     var value = event.value, 
     i = value.indexOf('#'), 
     $element = (i === -1) ? $("body") : $(value.substr(i, value.length-1)); 
     $.scrollTo($element, 'slow', {easing:'easeInOutExpo'}); 
    }); 
}); 

Используйте первый блок для лучшей скорости, но с отсутствием совместимости. Это будет работать по желанию в Chrome и Safari и в других случаях будет глючить. Это потому, что они обрабатывают hashchange и popstate событий правильно, а другие нет. Как ни странно, некоторые старые браузеры также будут работать правильно.

Второй способ, в то время как гораздо медленнее (есть заметная задержка при запуске анимации), будет работать почти во всех браузерах полу-хорошо. Да, просто полу-хорошо, иногда все еще не получается. Таким образом, реальность заключается в том, что из-за того, что браузеры не используют эти теги правильно, вы наверняка застряли со скучным старым неанимированным назад и вперед в переходы страниц. Так грустно. Если вам не нравится делать монументальное количество кодирования.

+0

Так что, если кто-то может найти что-то лучше этого, не забудьте отправить его здесь. Но я думаю, что это лучшее, что будет на данный момент. – foochow

ответ

1

Я не думаю, что event.value() - это то, что вы хотите. См. Примеры на этой странице для чего event.value на самом деле есть: http://www.asual.com/jquery/address/samples/api/. Это строка из URL-адреса, а не идентификатор href или element. Вам нужно будет сделать что-то дополнительное, чтобы фактически получить элемент, который вы хотите прокрутить, от этого значения, которое зависит от того, как вы вводите значение в URL-адрес.

+0

Да 'event.value()' где я застрял. Просто нужно получить правильный идентификатор элемента. Или форматируйте строку правильно. – foochow

+0

Как вы строите URL? Просто добавление новых разделов с помощью «/» или строки запроса, например «/? Id = x» – JacobMcLock

+0

Я использовал параметры по умолчанию для плагина с адреса jQuery. Поэтому каждый раз, когда нажимается ссылка, она меняется на, например, ** index.html #/# contact-us ** – foochow

 Смежные вопросы

  • Нет связанных вопросов^_^