jQuery Mobile Events Tutorial with Example
November 02, 2014
jQuery mobile provide events for page handling. jQuery mobile events are divided in categories. It is better use for page handling by mobile user. You can bind all mobile events by jQuery events like on() or bind(). Mobile Events play all important role in mobile application like touch screen, swipe and page up down. Three important mobile events are used in mobile application.
Touch events triggers when a user touches the screen (tap and swipe)
Scroll events triggers when a user scrolls up and down
Orientation events triggers when the device rotates vertically or horizontally
Initializing jQuery Mobile Events
All jQuery mobile events are initialized inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. No mobile events will run without complete page load.<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("p").on("click",function(){ $(this).hide(); }); }); </script> </head> <body> <div>jQuery Mobile Events</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate","#pagefirst",function(){ $("span").on("click",function(){ $(this).hide(); }); }); </script> </head> <body> <div data-role="page" id="pagefirst"> <div data-role="header"> <h1>Header Text - Concretepage</h1> </div> <div data-role="main" class="ui-content"> <span>jQuery Mobile Events</span> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
jQuery Mobile Touch Events
jQuery mobile touch events are triggered when the user touches the screen page in mobile and is of five types.A . jQuery Mobile Tap
jQuery mobile tap event is triggered when the user taps on an element.$("span").on("tap",function(){ $(this).hide(); });
B . jQuery Mobile Taphold
When the mobile user taps on an element and hold for one second. The taphold event is triggered.$("span").on("taphold",function(){ $(this).hide(); });
C . jQuery Mobile Swipe
When the user swipes over an element horizontally by more than 30px. The swipe event is triggered.$("span").on("swipe",function(){ $("span").text("Swipe detected!"); });
D. jQuery Mobile Swipeleft
When the user swipes over an element in the left direction by more than 30px. The swipeleft event is triggered.$("span").on("swipeleft",function(){ alert("You swiped left!"); });
E. jQuery Mobile Swiperight
When the user swipes over an element in the right direction by more than 30px. The Swiperight event is triggered.$("span").on("swiperight",function(){ alert("You swiped Right!"); });
jQuery Mobile Scroll Events
jQuery mobile provides two types of scroll events. When page scrolling start and page scroll stop.jQuery Mobile Scrollstart: When the user starts to scroll the page, the scrollstart event is triggered.
$(document).on("scrollstart",function(){ alert("Started scrolling!"); });
jQuery Mobile Scrollstop : When the user stops to scroll the page, the scrollstop event is triggered.
$(document).on("scrollstop",function(){ alert("Stop scrolling!"); });
jQuery Mobile Orientation Events
jQuery mobile provide orientation events in mobile application for screen rotation vertically or horizontally. When the user rotates the mobile device vertically or horizontally. The orientationchange event is triggered.$(window).on("orientationchange",function(){ alert("The orientation has changed!"); });