Скользящие переходы страниц с новым содержимым, предварительно загруженным под ним

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

Для каждого блока контента должен быть отдельный URL, и в идеале это должно работать вплоть до IE7. Предположим, что имеется не менее 50 страниц, каждая из которых содержит не менее 2–300 слов.

Я знаю, что существует множество вариантов перехода страницы jQuery, но большинство из тех, которые я рассматривал, скользят в новом содержимом, в то время как старый контент соскальзывает или исчезает в новом содержимом после того, как старый контент исчез (например, slide. js). Что мне нужно, так это занавес.js, который является вертикальным, запускается ссылкой вместо прокрутки и не требует загрузки всего содержимого на странице сразу.

Вот один из способов, который я придумал, чтобы построить это:

  • Текущий контент загружается из базы данных (или что-то еще)
  • Контент для предыдущей и следующей страниц также загружается и сохраняется в скрытых блоках div.
  • При нажатии на ссылку текущая страница соскальзывает (или появляется предыдущая страница)
  • Контент, который больше не нужен, удаляется
  • Новый контент «предварительно загружается» с помощью AJAX и скрывается
  • Локальный URL также меняется с AJAX

Примерная диаграмма

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

Я хорошо разбираюсь в JS/jQuery и PHP, изучаю AJAX.


person Phire    schedule 18.09.2013    source источник


Ответы (1)


Я бы предложил вкладки jQuery UI

  1. Не нужно иметь дело с AJAX. Просто заставьте сервер выдать 50 страниц текстов один раз, и все.

  2. Подключиться к API довольно просто, что дает вам больший контроль над всей процедурой. Достаточно контроля, чтобы подключить функцию, которая обновляет адресную строку при переходе через табуляцию.

person akamaozu    schedule 19.09.2013
comment
Может быть, я неправильно понимаю, но как вкладки помогут с механикой анимации перелистывания страниц вперед/назад? Также кажется, что он не будет масштабироваться для загрузки 50 страниц текста одновременно, но это сделает это намного проще. - person Phire; 19.09.2013
comment
Я предполагал, что вы будете использовать CSS для управления переходом и получения точной анимации смены страницы. jqueryui.com/tabs может применять/удалять классы, а ваши переходы css выполняют эту работу. - person akamaozu; 20.09.2013
comment
Вы можете оставить две вкладки видимыми и сложенными таким образом в CSS, а затем иметь класс, который переопределяет позиционирование в верхней части стека и перемещает его за пределы экрана. Используйте переход css, чтобы сделать его анимацией. Функция обратного вызова может выполнить настройку (например, загрузить новую страницу и заполнить ее контентом), и все, что нужно сделать, это переключить классы :) - person akamaozu; 20.09.2013