CODEWITHSUNDEEP
jquerynavigationjquery-mobileswipe
Anders
Anders

Reputation: 12716

Swipe to go back in jQuery Mobile?

I'm trying out jQuery Mobile, because I wasn't able to get swipe to go back a page to work well in jQTouch. But being new to jQuery Mobile, I have no idea how to go about implementing swipe, and how to make a swipe right cause a return to the previous page. I've been Googling and searching the docs, but can't find it, so I would really appreciate some help.

EDIT:

I found this solution when Googling a bit more:

        $('body').live('pagecreate', function (event) {
            $('div.ui-page').live("swipeleft", function () {
                var nextpage = $(this).next('div[data-role="page"]');
                // swipe using id of next page if exists
                if (nextpage.length > 0) {
                    $.mobile.changePage(nextpage, 'slide');
                }
            });
            $('div.ui-page').live("swiperight", function () {
                var prevpage = $(this).prev('div[data-role="page"]');
                // swipe using id of previous page if exists
                if (prevpage.length > 0) {
                    $.mobile.changePage(prevpage, 'slide', true);
                }
//                history.back();
//                return false;
            });
        });

This does work, but doesn't seem very stable. It jumps a bit back and forth when you swipe. I also tried the commented out code at the end - history.back(), which was suggested on another site. But that seemed even more unstable, causing all kinds of weird jumps.

Upvotes: 13

Views: 18868

Answers (7)

Aximili
Aximili

Reputation: 29474

Just sharing my code. I have been fiddling with this too, and I ended up having this:

var allowGlobalSwipe = true; // If you want to disable it at some point

$(function() {
  $(window).on("swipeleft", jqmForward).on("swiperight", jqmBack);

  // This is an example of where you may want to disable the swipe
  $('#slideContainer').swiper({
    onTouchStart: function () { allowGlobalSwipe = false; },
    onTouchEnd: function () { allowGlobalSwipe = true; }
  });
});

function jqmBack(e) {
  if (!allowGlobalSwipe) return;
  var prevpage = $('div.ui-page-active').prevAll('div[data-role="page"]');
  if (prevpage.length > 0)
    $.mobile.changePage($(prevpage[0]), { transition: "slide", reverse: true }, true, true);
}
function jqmForward(e) {
  if (!allowGlobalSwipe) return;
  var nextpage = $('div.ui-page-active').nextAll('div[data-role="page"]');
  if (nextpage.length > 0)
    $.mobile.changePage($(nextpage[0]), { transition: "slide" }, false, true);
}

Note that I use prevAll and nextAll because the previous page's div may not always be immediately before the current page's div.

Upvotes: 1

Mark Demicoli
Mark Demicoli

Reputation: 21

Correct solution is to use the history object and allow JQM to select the correct (left or right) transition based on which direction we send the browser.

Hence, set the default transition to "slide" and set all links with data-transition attribute to "fade", then attach history.back/forward to the swipe events:

$.mobile.defaultPageTransition = 'slide';
$( "body" ).on( 'swiperight', function() {history.back()}); 
$( "body" ).on( 'swipeleft', function() {history.forward()});   
$("a").attr("data-transition", "fade");

If you're creating dynamic content (and I damn well hope you are young man), be sure to set the data-transition="fade" attribute on all links after triggering the "create" event.

eg:

$("#mydiv")
.html("<a href="#page-somewhere"></a>")
.trigger("create")
.find("a").attr("data-transition", "fade");

Upvotes: 2

Sudheer
Sudheer

Reputation: 9

In jquery.mobile-1.0-rc2, swipe to back to be mentioned as 

$.mobile.changePage('topage', {  transition: "slide", 
                             reverse: true,
                           });

Upvotes: 0

Sudheer
Sudheer

Reputation: 479

In jquery.mobile-1.0-rc2, swipe back is mentioned as

$.mobile.changePage('topage', { transition: "slide", reverse: true, });

Upvotes: 1

uzay95
uzay95

Reputation: 16632

function ChangePage(pageId,iPageIndex) {
    var forward = iCurrCardIndex < iPageIndex;
    iCurrCardIndex = iPageIndex;

    $.mobile.changePage("#" + pageId, "slide", !forward, true);
}

Upvotes: -2

naugtur
naugtur

Reputation: 16915

The answer from Timothy looks ok, but someone might prefer this similiar and ready solution:

http://filamentgroup.com/lab/jquery_mobile_pagination_plugin/

Published today by the home of 2 of the core jQuery Mobile Framework Team members

It's a plugin that lets the user easily swipe through pages. Might not fit every use-case, but sure is well-done (who else would know how to do something with jqm if not those guys? :) )

Upvotes: 6

Grey Perez
Grey Perez

Reputation: 20448

You can use the jQuery .live "swipe left" and "swipe right" events.

Example:

 $(document).ready(function() {

      $('.yourPage').live('swipeleft swiperight',function(event){
          if (event.type == "swiperight") {
              var prev = $("#previndex",$.mobile.activePage);
              var previndex = $(prev).data("index");
              if(previndex != '') {
                  $.mobile.changePage({url:"index.php",type:"get",data:"index="+previndex},"slide",true);
              }
          }
          if (event.type == "swipeleft") {
              var next = $("#nextindex",$.mobile.activePage);
              var nextindex = $(next).data("index");
              if(nextindex != '') {
                  $.mobile.changePage({url:"index.php",type:"get",data:"index="+nextindex});
              }
          }
          event.preventDefault();
      });
});

Also, this YouTube video might help you as well. http://www.youtube.com/watch?v=Ij1RYI1p7rM

Upvotes: 6

Related Questions