CODEWITHSUNDEEP
jqueryjquery-mobilemobile
Stranger B.
Stranger B.

Reputation: 9364

How to make live transition in jQueryMobile

I want to make a live transition in jQueryMobile, when I swipe left or right, it shows a new page.

I have manager to do that on click using : $.mobile.changePage

I have different pages in one html page like : 

<div data-role="page" id="p2">
<div data-role="header">
     <h1>Header 2</h1>

</div>
<div data-role="content">Page Two</div>
<div data-role="footer">
     <h4>Footer</h4>

</div>

I want to change between these pages only by swipe left or right.

here is the code added to populate pages :

  $(document).ready(function() {
    $.getJSON('http://prod.footballclub.orange.com/ofc/news?offset=0&limit=10', function(jd) {
          
     
           
        $.each(jd, function(idx, obj) {
       
        $("body").append('<div data-role="page" id="p'+(idx+4)+'"><img src="'+obj.image+'" class="img-responsive" alt="Cinque Terre">     <h8> '+obj.nbView+' vues </h8>  <h4 align="middle" style="color:#E49B0F"> '+obj.title+' <h4>  <h5> '+obj.description+' </h5><div data-role="footer"> <h4>Footer</h4> </div> </div>');
    
}); 
           

          });
   });

Upvotes: 1

Views: 36

Answers (1)

ezanker
ezanker

Reputation: 24738

jQuery Mobile provides events for swipeleft and swiperight. So you could do something like this:

$(document).on('swipeleft swiperight', '[data-role="page"]', function (e) {
    var dir = 'prev';
    if (e.type == 'swipeleft') {
        dir = 'next';
    }
    GoToNextPage($(this), dir);
});

function GoToNextPage($item, direction) {
    var $next;
    if (direction == 'next') {
        if ($item.next().length > 0) {
            $next = $item.next();
        } else {
            $next = $('[data-role="page"]').first();
        }
    } else {
        if ($item.prev().length > 0) {
            $next = $item.prev();
        } else {
            $next = $('[data-role="page"]').last();
        }
    }
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#" + $next.prop("id"), { });

}

On swipe you get the current page and the direction. Then in GoToNextPage() figure out which page you should navigate to.

Working DEMO

Upvotes: 1

Related Questions