Навигация по странице с помощью мобильного jQuery? - PullRequest
Новая
       3

Навигация по странице с помощью мобильного jQuery?

0 голосов
/ 02 апреля 2012

Я создаю 3-страничный мобильный оптимизированный сайт.Мне нужна горизонтальная навигация по слайдам, как это может обеспечить jQuery mobile.Если вы находитесь на странице 1 и вы переходите на страницу 2, страница 2 скользит справа.

Однако со страницы 1 вы также можете перейти на страницу 3. Если вы это сделаете, я не хочу, чтобы страница 3 скользила втаким же образом, страница 2 будет.Вместо этого мне нужно, чтобы страница 2 скользила и продолжала двигаться, поэтому страница 3 вместо этого скользит.

Вот мое демо javascript.Нажав «Карта» со страницы 1, можно перейти на страницу 2. Нажав «1» на странице 1, вы перейдете за страницу 2 и перейдете на страницу 3.

http://smartpeopletalkfast.co.uk/pos/

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

1 Ответ

0 голосов
/ 02 апреля 2012

Вы можете «хай-джек» щелкнуть по ссылке и отправить пользователя на нужную псевдостраницу с нужной вам анимацией: 

$(function () {

    //create an associative array of objects to pas to the `changePage()` function for a specific transition
    var convert = {

            //from page1
            page1 : {

                //to page2
                page2 : { transition : 'slide'},

                //to page3
                page3 : { transition : 'slide'}
            },

            //from page2
            page2 : {

                //to page1
                page1 : { transition : 'slide', direction : 'reverse' },

                //to page3
                page3 : { transition : 'slide'}
            },

            //from page3
            page3 : {

                //to page1
                page1 : { transition : 'slide', direction : 'reverse' },

                //to page2
                page2 : { transition : 'slide', direction : 'reverse' }
            }
        };
    $('.my-links').bind('click', function () {

        //change to the specified page
        $.mobile.changePage($(this).attr('href'), convert[$.mobile.activePage[0].id][$(this).attr('href').replace('#', '')]);
        return false;
    });
});

Связывается с любым элементом класса .my-links. Также page / page2 / page3 являются идентификаторами трех страниц.

...