Реализация iPhone-подобного слайдера контента в wep-приложении - PullRequest
Новая
       32

Реализация iPhone-подобного слайдера контента в wep-приложении

0 голосов
/ 29 марта 2012

Я создаю веб-приложение для смартфонов. В моем приложении я хочу дать пользователю iOS-подобный опыт. Я хочу, чтобы мой интерфейс функционировал аналогично iOS. Я в основном думаю о навигации здесь. Я хочу, чтобы мое приложение скользило слева направо и отображало динамический контент в зависимости от того, по какой ссылке щелкнул пользователь. Вот видео, показывающее навигацию так, как я хочу:

http://www.youtube.com/watch?v=KTcISVU4Nf4&feature=player_detailpage#t=2s

Из того, что я обнаружил, это достигается с помощью CSS3 и JQuery. Он встроен в некоторые фреймворки, например, http://www.jqtouch.com/. Но я считаю, что фреймворки работают слишком тяжело и вяло, они не дают пользователю приятных впечатлений. И я также столкнулся с несколькими ошибками при тестировании. Вот почему я исключил JQtouch в качестве альтернативы.

Итак, я прошу совета о том, как реализовать скользящую навигацию, оставляя приложение аккуратным, плавным и легким. Какой лучший путь? Можно ли сделать с чистым CSS? Как? Любой пример кода, который может мне помочь, очень ценен.

Ответы [ 2 ]

3 голосов
/ 29 марта 2012

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

Альтернативой jqtouch может быть sencha touch или jquery mobile

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

1 голос
/ 29 марта 2012

Посмотрим. JQuery Touch выполняет свои функции с помощью анимации перевода на своих слайдах.

Очень простой пример (работает только в браузере webkit - Safari / Chrome): http://jsfiddle.net/2USAR/8/

объяснение кода.

JS

В части jQuery при использовании щелчков на слайде javascript назначает новый класс нескольким элементам.

Сначала мы назначаем класс animate родительскому держателю слайдов. Этот класс запускает CSS, который содержит детали, относящиеся к тому, как мы собираемся анимировать слайды.

Затем мы присваиваем классы "slideLeftOut" и "slideLeftIn" для #first и #second divs соответственно.

Эти классы в css содержат информацию о том, какую анимацию ключевых кадров вызывать.

И в конце нашего JS есть setTimeout, который удалит классы (в нашем случае «animate») после завершения анимации.

CSS

Большинство вещей говорят сами за себя. Просто имейте в виду ".animate" css и посмотрите, как структурирована анимация ключевых кадров.

В анимации ключевых кадров мы используем webkit translate для перемещения элемента влево.

...