PhoneGap ONLINE / OFFLINE image-alert functionality: Events API
====================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H M S on line / off line</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script>
$(document).ready(function () {
// $("p").text("The DOM is now loaded and can be manipulated.");
document.addEventListener("online", onOnline, false);
document.addEventListener("offline", onOffline, false);
});
/*
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("device ready"); // No Use device ready funtion call. $doc.ready funtion call used before onDeveiceReady() call
} */
// Handle the online event
//
function onOnline() {
alert("Online ");
$("#neterrmsg").hide();
$(".indicatorimage").attr('src','jquery-mobile/images/online.png'); // green color button
}
function onOffline() {
alert("offline");
$("#neterrmsg").show();
$(".indicatorimage").attr('src','jquery-mobile/images/offline.png'); //Red color button
}
</script>
</head>
<body >
<div data-role="page">
<div data-role="header" align="center" data-theme="b">
<h1 style="display:inline-block;margin:10px auto" align="center">on/off-line</h1>
<img src="" style="width:30px;float:right;padding-top:5px" class="indicatorimage" class="ui-li-aside"></img>
</div>
<div data-role="content">
<B>ON LINE / OFF LINE DATA</B>
<div id="neterrmsg" class="ex_Alrt1">
<p data-translate="lbl_netmsg"><b>The application is currently in offline mode. An active network connection is required to continue. Please try again later when an active network connection is available.</b></p>
</div>
</div>
</body>
</html>
====================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H M S on line / off line</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<script>
$(document).ready(function () {
// $("p").text("The DOM is now loaded and can be manipulated.");
document.addEventListener("online", onOnline, false);
document.addEventListener("offline", onOffline, false);
});
/*
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("device ready"); // No Use device ready funtion call. $doc.ready funtion call used before onDeveiceReady() call
} */
// Handle the online event
//
function onOnline() {
alert("Online ");
$("#neterrmsg").hide();
$(".indicatorimage").attr('src','jquery-mobile/images/online.png'); // green color button
}
function onOffline() {
alert("offline");
$("#neterrmsg").show();
$(".indicatorimage").attr('src','jquery-mobile/images/offline.png'); //Red color button
}
</script>
</head>
<body >
<div data-role="page">
<div data-role="header" align="center" data-theme="b">
<h1 style="display:inline-block;margin:10px auto" align="center">on/off-line</h1>
<img src="" style="width:30px;float:right;padding-top:5px" class="indicatorimage" class="ui-li-aside"></img>
</div>
<div data-role="content">
<B>ON LINE / OFF LINE DATA</B>
<div id="neterrmsg" class="ex_Alrt1">
<p data-translate="lbl_netmsg"><b>The application is currently in offline mode. An active network connection is required to continue. Please try again later when an active network connection is available.</b></p>
</div>
</div>
</body>
</html>
No comments:
Post a Comment