Geek asks and answers

How to detect / query the current change / transition in jQuery Mobile?

How can I detect / execute a query, is there a transition / transition currently in jQuery Mobile (jQM)?

My goal is to prevent the dialog from opening when there is currently a switch between pages. Currently, the UI is interrupted when a dialog opens when the changepage event continues.

Any ideas on this?

+3
source share
3 answers

In the JQM 1.4.0 class ui-mobile-viewport-transitioning, a tag was added bodyduring transitions, so the following works for me:

if (!$("body.ui-mobile-viewport-transitioning").length) {
   //do something
}else{
    console.log("Don't do it we are transitioning")
    return false
 }
+2
source
  • pagebeforeshow

Runs on the displayed page before the transition begins.

  • pagebeforehide

Launched on a hidden page before the transition.

  • pageshow

.

  • pagehide

.

http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html

+1

I did not find the transition status information in jQuery Mobile, however you can simply add three events: one before and one after the change, and the other when changing the page. Then save in the global variable whether the transition occurs:

window.transitioning = false;

$(document).on("pagebeforechange", function() { transitioning = true; });
$(document).on("pagechange", function() { transitioning = false; });
$(document).on("pagechangefailed", function() { transitioning = false; });

In this example, I create a global variable transitioning, but you can create this variable if you want, for example, by creating a local variable in the dialog handler, rather than using a global variable.

Now you can add your state as follows:

if(!transitioning) {
  // Do your stuff
} else {
  // Delegate the events by listening for pagechange and then do your stuff
}
0
source

More articles:


All Articles