CODEWITHSUNDEEP
javascriptjqueryjquery-mobilebackbone.js
vikingmute
vikingmute

Reputation: 412

jquery mobile mobile back with transition?

I'm buliding a web app using backbone.js and jquery mobile. i wanna add a reverse slide effect to all the className "back" button.

the code looks like this,

$('.ico_back').live('click', function(event) {
 $.mobile.back();
 return false;
});

Does anyone know how to add a reverse effect to $.mobile.back() function?

(This is a single-page app, so i can't do this with a tranditional JQM way: like add a simple data-transition="slide")

Upvotes: 1

Views: 4682

Answers (4)

Vinod Louis
Vinod Louis

Reputation: 4876

you can even use history.back() at button click

Upvotes: 0

krishwader
krishwader

Reputation: 11371

On the lines of Tolis Emmanouilidis's answer, you could wrap your ico_back classes with an a 

$(document).on("pageinit", "#page-id", function () {
    $('.ico_back').wrap($('<a/>', { "data-rel":"back", "data-transition" : "slide" }));
});

NOTE: This will be applicable if and only if ico_back isnt an anchor tag.

Upvotes: 1

Omar
Omar

Reputation: 31732

Use the below code to dynamically change to previous page.

Demo

$(document).on('click', '.ico-back', function () {
 var previous = $.mobile.activePage.prev('[data-role=page]');
 $.mobile.changePage(previous, { 
  transition: 'slide',
  reverse: true });
});

EDIT: Based on the code in repo provided, do the following changes to the following block of code.

if (this.firstPage) {
 transition = 'slide';
 this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash:false, transition: transition, reverse:true });

Upvotes: 3

Apostolos Emmanouilidis
Apostolos Emmanouilidis

Reputation: 7197

In each element with class .ico_back it adds the data-rel and data-transition attributes. This way you don't have to find which is the previous page or add extra logic inside your code. jQM manages the back page transition for you. 

$(document)
     .on("pageinit", "#page-id", function () {
         $('.ico_back')
             .each(function (index) {
                 $(this)
                     .attr("data-rel", "back");
                 $(this)
                     .attr("data-transition", "slide");
          });
});

I hope this helps.

Upvotes: 1

Related Questions