2

Here is the code extract which works well with 2 pages:

<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 -->

How can I make it more universal to work with huge number of pages?

LA_
  • 19,823
  • 58
  • 172
  • 308

3 Answers3

7

This code also works for the swipe.

<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>
iJade
  • 23,144
  • 56
  • 154
  • 243
Sathyaraj
  • 61
  • 1
  • 5
6

This seems to do what you want

<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>

UPDATE: I tested this with the iPhone emulator and the Android emulator and it worked as expected in both.

UPDATE: Changed answer to address the user's comment about using a slider causing swipe left/right.

Jason Dean
  • 9,585
  • 27
  • 36
  • Thanks. This is what I was looking for and it works perfectly. However, I've face with problem - when I move the slider (which is on the same page) to the left, then swipeleft also happens. How to avoid that? – LA_ Sep 24 '11 at 07:33
  • 2
    Wow, that was a PITA to figure out. I think this will work though. Explanations in comments – Jason Dean Sep 24 '11 at 16:07
  • Thanks, Jason. It works. But looks like this is not very good approach (it doesn't work on PC; it changes the page, if you didn't touch the slider and touched background by mistake). Seems I need to create special area for such gestures. Trying to figure out how to create that to occupy remaining space. – LA_ Sep 24 '11 at 20:12
  • Oh, I didn't realize it needed to work on the PC too. I just updated my answer again to handle that. It works great in Chrome for me. – Jason Dean Sep 24 '11 at 20:19
  • I thought also about having a swipe area. But that usability to that for the end user seems bad. – Jason Dean Sep 24 '11 at 20:21
  • Thanks for your help. Probably, not so bad - user wouldn't expect that he/she can change the page by swiping on the slider ;) Could you please help me with creation of that area? I've raised another question for the same - http://stackoverflow.com/questions/7541780/how-to-create-div-with-100-height-with-jquery-mobile – LA_ Sep 24 '11 at 20:40
  • Jason, one more question - why if I change `$('.ui-slider-handle').live('touchstart'` with `$('#slider1').live('touchstart'` it doesn't work? – LA_ Sep 25 '11 at 08:20
  • Because #slider1 is actually the id of the textbox that holds the current value of the slider, not the visual slider component itself. – Jason Dean Sep 25 '11 at 14:37
  • 1
    Any chance Someone could setup a jsfiddle? I can't get this to work >__ – Alisso Feb 15 '13 at 12:51
0

I'm using swipeview to handle a large number of pages. From the creator of iScroll.

Magnus Smith
  • 5,895
  • 7
  • 43
  • 64
  • Please show your code of how you got swipeview working with jQuery Mobile page transitions. The documentation on swipeview is non-existent. – Justin May 22 '13 at 13:15
  • Sorry - I eventually gave up on swipeview for my particular situation. I need to revisit the problem though... – Magnus Smith Jun 27 '13 at 20:55