HTML5 Mobile web Application Development-JQuery Mobile (4)-Events

HTML5 Mobile web Application Development-JQuery Mobile (4)-Events

Jquery Mobile provides a wide range of event processing and detection mechanisms.

1. Rolling events

In Jquery Mobile, scrollStart and scrollStop events are used to listen to events where users start and stop scrolling. The following code uses scrollStart as an example:

$ (Document). on ("scrollstart", function () {alert ("start rolling! ");});

2. Interface related events

From activation to loading, a page is divided into four parts in jquery mobile:

Page Initialization-before the Page is created, when the Page is created, and after the Page is initialized

Page Load/Unload-when an external Page is loaded, uninstalled, or failed

Page Transition-before and after Page Transition

Page Change-when the Page is changed or fails

In the page initialization section, jquery mobile divides it into three stages: pagebeforecreate, pagecreate, and pageinit, you can execute corresponding actions in each stage. The sample code is as follows:

$(document).on("pagebeforecreate",function(event){  alert(" pagebeforecreate ");}); $(document).on("pagecreate",function(event){  alert(" pagecreate ");});$(document).on("pageinit",function(event){  alert(" pageinit ")});

3. About device direction

The following is the sample code from w3cschool. You can listen to the changes in the device direction and set different styles after the changes in the device direction;

$(window).on("orientationchange",function(){  if(window.orientation == 0) // Portrait  {    $("p").css({"background-color":"yellow","font-size":"300%"});  }  else // Landscape  {    $("p").css({"background-color":"pink","font-size":"200%"});  }});