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>
In jQuery Mobile, we use the pagecreate event, which occurs when the page has been created in the DOM, but before enhancement is complete.
<!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>
#pagefirst parameter points to the id of the page to specify the page event. The jQuery on() method is used to attach event handlers.

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();
}); 
When a tap event fires on a element, hide the current element:

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!");
     });
The orientationchange event is bound to the window object, we can use the window. Orientation property to set different styles to distinguish between portrait and landscape views.







©2024 concretepage.com | Privacy Policy | Contact Us