Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > jQuery mobile пролистывание страниц

Автор: Валера 29.9.2012, 15:36

Всем доброго времени суток!
До недавнего времени я не пользовался jQuery mobile, да и с самим jQuery начал знакомство совсем недавно. Однако передо мной была поставлена определённая задача, пути решения которой мне не удаётся найти своими силами.
Суть:
Нужно сделать сайт заточенный под использование на мобильном, с возможностью пролистывания страниц пальцем, то есть - пользователь нажимает на экран и двигает палец влево или вправо, и открытая страница отъезжает по мере передвижения пальца - когда пользователь убирает палец с экрана, страница полностью уходит в сторону, а на её место встаёт другая. Примерно аналогично навигации по меню с приложениями на андройде.
Просмотрел несколько книг по jQuery mobile, но нигде не нашёл описаний реализации данного эффекта, хотя встречал такие сайты.

Буду очень благодарен любой помощи - может быть кто-нибудь сможет указать хотя бы примерное направление в котором двигаться. Главная проблема в том, что я должен сделать это в довольно сжатые сроки. Если бы я располагал временем, то продолжил бы искать сам, но в данной ситуации вынужден обратиться за помощью. Заранее благодарю!

Автор: Aliance 1.10.2012, 09:25

Цитата(Валера @ 29.9.2012, 16:36

)

пользователь нажимает на экран и двигает палец влево

http://www.w3.org/TR/2011/WD-touch-events-20110505/. Направление определяем по координатам, например так:

Код


var coords = {};
window.ontouchstart = function() {
    coords.begin = {
        x: event.pageX,
        y: event.pageY,
    };
}
window.ontouchend = function() {
    coords.end = {
        x: event.pageX,
        y: event.pageY,
    };
    if (coords.end.x - coords.begin.x > 0) {
        // движение вправо по оси X
    }
}

Ну а под страницами видимо подразумеваются слои. Там соответственно решите сами все ли загружено сразу, или грузиться заранее только следующий слайд через ajax и через например $.animate() меняете видимость нужных слайдов.