Introduction
If you are a mobile user, then you might be knowing there are several events that are tailored for mobile browsing including touch events and orientation events. You can of course use all standard jQuery events in jQuery Mobile as well. In addition, jQuery Mobile provides options to deal with the mobile specific events also.
Initializing jQuery Mobile Events
If you are already familiar with jQuery, you might be knowing we write our jQuery code inside $(document).ready() function to prevent any jQuery code from running before the document is finished loading. But in jQuery Mobile, AJAX is used to load the contents of each page into the DOM and the DOM handler executes only for the first page. Hence, $(document).ready() function will be triggered before your first page is loaded and the code will be executed only after a page refresh. It will defeat the purpose of using AJAX for page handling. So, we need to bind to the pageinit event to execute code whenever a new page is loaded like this:
$(document).on(“pageinit”, function(){
});
You can bind to the pageinit event of a specific page with id pageone like this:
$(document).on(“pageinit”, “pageone”, function(){
});
Handling Page Events
Different events get triggered when a page is presented before the user. During the page initialization, pagebeforecreate event gets triggered when the page is about to be initialized and pagecreate event gets triggered when the page is created. When an external page is loaded, pagecontainerbeforeload event gets triggered before the page is loaded, pagecontainerload event gets triggered after the page is loaded successfully and pagecontainerloadfailed event gets triggered if the page is not loaded successfully. During the transition from one page to another, pagebeforehide and pagehide events get triggered on the from page and pagebeforeshow and pageshow events get triggered on the to page.
Try this yourself:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagebeforecreate", function (event) {
alert("Page beforecreate event triggered!");
});
$(document).on("pagecreate", function (event) {
alert("Page create event triggered!");
});
$(document).on("pageinit", function (event) {
alert("Page init event triggered!")
});
$(document).on("pagebeforeshow", "#page2", function () {
alert("Events list is going to be shown!");
});
$(document).on("pageshow", "#page2", function () {
alert("Events list is shown!!");
});
$(document).on("pagebeforehide", "#page1", function () {
alert("Main page is going to be hidden");
});
$(document).on("pageh
alert("Main page is hidden");
});
$(document).on("pagecontainerbeforeload",function(event,data){
alert("The pagecontainerbeforeload event triggered!\nThe page : " + data.url + " is going to be loaded");
});
$(document).on("pagecontainerload",function(event,data){
alert("The pagecontainerload event triggered!\nURL: " + data.url);
});
$(document).on("pagecontainerloadfailed",function(event,data){
alert("The pagecontainerloadfailed event is triggered.");
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Page Events</h1>
</div>
<div data-role="content">
<p>
Introduction to jQuery Mobile Page Events!
</p>
<a href="page3.html">Visit an External Page</a><br />
<a href="#page2">Different Events</a>
</div>
<div data-role="footer">
<h1>@Copyright</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>jQuery Mobile Page Events</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>pagebeforecreate</li>
<li>pagecreate</li>
<li>pagebeforehide</li>
<li>pagehide</li>
<li>pagebeforeshow</li>
<li>pageshow</li>
</ul><br />
<a href="#page1">Go to Home Page</a>
</div>
<div data-role="footer">
<h1>@Copyright</h1>
</div>
</div>
</body>
</html>
Save the file as pageevents.html. Open a new file and add the following lines of code.
<html> <head> <title>External Page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page3"> <div data-role="header"> <h1>This is an external page!!!</h1> </div> <div data-role="content"> <a href="pageevents.html">Go Back</a> </div> <div data-role="footer"> <h1>@Copyright</h1> </div> </div> </body> </html>
Save the file as page3.html. Make sure that both the files are saved in your localhost folder (C:/inetput/wwwroot in case of IIS and xampp/htdocs in case of Apache server). Access the pageevents.html as localhost/pageevents.html from your browser. You will see different alert messages indicating different events and display a screen like this:
Image------1
Click both the links and see different events getting triggered.
Handling Touch Events
The touch events are triggered when the user taps on an element or swipes over an element. The tap event is triggered after a quick touch event and the taphold event is triggered after a sustained touch event. The swipe event is triggered when a horizontal drag of 30px or more or a vertical drag of less than 75px occurs within one second. The swipeleft event is triggered when a swipe occurs in the left direction and a swiperight event is triggered when a swipe occurs
Try this yourself:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
p
{
cursor:pointer;
border:2px solid black;
text-align:center;
}
</style>
<script>
$(document).on("pageinit",function(){
$("#tap").on("tap",function(){
$(this).fadeToggle(1000);
});
$("#taphold").on("taphold",function(){
$(this).slideToggle(1000);
});
$("#swipe").on("swipe",function(){
alert("Swipe detected");
});
$("#swipeleft").on("swipeleft",function(){
$(this).fadeToggle(1000);
});
$("#swiperight").on("swiperight",function(){
$(this).slideToggle(1000);
});
});
</script>
</head>
<body>
<div data-role="page" id="tappage">
<div data-role="header">
<h1>Touch Events</h1>
</div>
<div data-role="content">
<p id="tap">Tap Me!!!</p>
<p id="taphold">Tap and Hold Me!!!</p>
<p id="swipe">Swipe Me!!!</p>
<p id="swipeleft">Swipe Me Left!!!</p>
<p id="swiperight">Swipe Me Right!!!</p>
</div>
<div data-role="footer">
<h1>@Copyright</h1>
</div>
</div>
</body>
</html>
Save the file as touch.html and open it using your web browser. You will get a screen like this:
Image-2---------------
Try to tap and swipe as specified and see the different events getting triggered.
Handling Orientation Events
The orientationchange event is triggered when the user changes the orientation from portrait to landscape or vice versa. Portrait orientation is when the device is held in vertical position and landscape orientation is when the device is held in a horizontal position. You need to attach the orientationchange event to the window object to get the required information. Using the orientation property of the window object, you can check whether the device is in landscape or portrait mode. The value of orientation property 0 means that the device is in portrait mode and the value is 90 or -90 means the device is in landscape mode.
Try this yourself:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pageinit", function (event) {
$(window).on("orientationchange",function(event){
if(event.orientation == 0)
{
alert("Portrait: You are keeping your device vertically!!!");
}
else
{
alert("Landscape: You are keeping your device horizontally!!!")
}
});
});
</script>
</head>
<body>
</body>
</html>
Save this file as orientation.html. You will get the output only if you test this on a mobile browser.
Handling Scroll Events
The scrollstart event is triggered when the user starts to scroll the page and the scrollstop event is triggered when the user stops scrolling.
Try this yourself:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pageinit", function () {
$(document).on("scrollstart",function(){
$("#result").append("Scrolling started <br />");
});
$(document).on("scrollstop",function(){
$("#result").append("Scrolling stopped <br />");
});
});
</script>
</head>
<body>
<div data-role="page" id="tappage">
<div data-role="header">
<h1>Scroll Events</h1>
</div>
<div data-role="content">
<span id="result"></span>
<p>Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see. Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see. Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see. Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see. Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see. Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see. Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see. Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see. Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see.Scroll to see.</p>
</div>
<div data-role="footer">
<h1>@Copyright</h1>
</div>
</div>
</body>
</html>
Save the file as scroll.html and open it using your browser. Then scroll to see the events details.
Summary
In this section, we have seen how to handle different mobile specific events.