Как пролистать несколько мобильных страниц jquery? - PullRequest
Новая
       17

Как пролистать несколько мобильных страниц jquery?

2 голосов
/ 23 сентября 2011

Вот фрагмент кода, который хорошо работает с 2 страницами: 

<script>
  $(document).ready(function() {
    window.now = 1;

    $('#device1').live("swipeleft", function(){
        window.now++
        $.mobile.changePage("#device"+window.now, "slide", false, true);
    });
    $('#device2').live("swiperight", function(){
        window.now--;
        $.mobile.changePage("#device"+window.now, "slide", true, true);
    });    

  });
</script> 

...
<div data-role="page" id="device1">
...
</div><!-- /page -->
<div data-role="page" id="device2">
...
</div><!-- /page -->

Как сделать его более универсальным для работы с огромным количеством страниц?

Ответы [ 3 ]

7 голосов
/ 15 ноября 2012

Этот код также работает для прокрутки. 

<script>

$('div.ui-page').live("swipeleft", function () {
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
    }
});
$('div.ui-page').live("swiperight", function () {
    var prevpage = $(this).prev('div[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {
            transition: "slide",
            reverse: true
        }, true, true);
    }
});

</script>
6 голосов
/ 24 сентября 2011

Это похоже на то, что вы хотите 

<script>
$(document).ready(function() {

    $('.ui-slider-handle').live('touchstart', function(){
        // When user touches the slider handle, temporarily unbind the page turn handlers
        doUnbind();
    });

    $('.ui-slider-handle').live('mousedown', function(){
        // When user touches the slider handle, temporarily unbind the page turn handlers
        doUnbind();
    });

    $('.ui-slider-handle').live('touchend', function(){
        //When the user let's go of the handle, rebind the controls for page turn
        // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
        setTimeout( function() {doBind();}, 100 );
    });

    $('.ui-slider-handle').live('mouseup', function(){
        //When the user let's go of the handle, rebind the controls for page turn
        // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
        setTimeout( function() {doBind();}, 100 );
    });

    // Set the initial window (assuming it will always be #1
    window.now = 1;

    //get an Array of all of the pages and count
    windowMax = $('div[data-role="page"]').length; 

   doBind();
});
    // Functions for binding swipe events to named handlers
    function doBind() {
        $('div[data-role="page"]').live("swipeleft", turnPage); 
        $('div[data-role="page"]').live("swiperight", turnPageBack);
    }

    function doUnbind() {
        $('div[data-role="page"]').die("swipeleft", turnPage);
        $('div[data-role="page"]').die("swiperight", turnPageBack);
    }

    // Named handlers for binding page turn controls
    function turnPage(){
        // Check to see if we are already at the highest numbers page            
        if (window.now < windowMax) {
            window.now++
            $.mobile.changePage("#device"+window.now, "slide", false, true);
        }
    }

    function turnPageBack(){
        // Check to see if we are already at the lowest numbered page
        if (window.now != 1) {
            window.now--;
            $.mobile.changePage("#device"+window.now, "slide", true, true);
        }
    }
</script>

ОБНОВЛЕНИЕ: я проверил это с эмулятором iPhone и эмулятором Android, и он работал как ожидалось в обоих случаях.

ОБНОВЛЕНИЕ: Изменен ответ на адрес пользователя с комментарием об использовании ползунка, вызывающий пролистывание влево / вправо.

0 голосов
/ 18 декабря 2012

Я использую swipeview для обработки большого количества страниц. От создателя iScroll.

...