PhoneGap-----Device Infomation、Network State and four kinds of Notifications

最新推荐文章于 2024-09-25 07:30:55 发布

原创最新推荐文章于 2024-09-25 07:30:55 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#PhoneGap #HTML

phonegap 同时被 2 个专栏收录

9 篇文章

订阅专栏

html5

8 篇文章

订阅专栏

本文介绍了如何利用PhoneGap框架获取设备基本信息、检查网络状态及实现不同类型的提示通知。通过简单的HTML与JavaScript代码示例，展示了如何在移动端应用中集成这些功能。

The first , we can lead how to get the device Infomation ! It's very convenient by Phonegap ! At least , I think so !

<!DOCTYPE html>
<html >
<head>
<title>My Device</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

   function onLoad()
   {
	   document.addEventListener("deviceready",onDeviceReady,false);
   }
   
   function onDeviceReady()
   {
	   var myDiv = document.getElementById('props');
	   myDiv.innerHTML = 'Device Name:    ' + device.name     + '<br />' + 
	                     'Device PhoneGap:' + device.phonegap + '<br />' + 
						 'Device Platform:' + device.platform + '<br />' +
						 'Device UUID:    ' + device.uuid     + '<br />' +
						 'Device Version: ' + device.version  + '<br />' ;
   }
   
</script>
</head>
<body onLoad="onLoad()">
   <p id="props">Loading device properties...</p>
</body>
</html>

The second , we can check the network state :

<!DOCTYPE html>
<html >
<head>
<title>Connectivity Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

   document.addEventListener("deviceready",onDeviceReady,false);
   
   function onDeviceReady()
   {
	  checkConnection();
   }
   
   function checkConnection()
   {
	   var networkState = navigator.network.connection.type;
	   
	   var states = {};
	   states[Connection.UNKNOWN] = 'Unknown connection';
	   states[Connection.ETHERNET] = 'Ethernet connection';
	   states[Connection.WIFI] = 'Wifi connection';
	   states[Connection.CELL_2G] = 'Cell 2G connection';
	   states[Connection.CELL_3G] = 'Cell 3G connection';
	   states[Connection.CELL_4G] = 'Cell 4G connection';
	   states[Connection.NONE] = 'No network connection';
	   
	   alert('Connection type:' + states[networkState]);
   }
   
</script>
</head>
<body>
   <p>A dialog box will report the network state.</p>
</body>
</html>

The third , the cases of four kinds of notifications :

<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Event Example</title>

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

   function onLoad()
   {
	   document.addEventListener("deviceready",onDeviceReady,false);
   }
   
   function onDeviceReady(){
   }
   
   function showAlert(){
	   navigator.notification.alert(
	     'Game Over!',//message
		 alertCallback,//callback
		 'Game Over',
		 'Done'//buttonName
		 );
   }
   
   function alertCallback(){
   }
   
   function onConfirm(button){
	   alert('You selected button ' + button);
   }
   
   function showConfirm(){
	   navigator.notification.confirm(
	     'Game Over!',
		 onConfirm,
		 'Game Over',
		 'Restart,Exit'
		 );
   }
   
   function playBeep(){
	   navigator.notification.beep(2);
   }
   
   function vibrate(){
	   navigator.notification.vibrate(4000);
   }
   
</script>
</head>
<body onLoad="onLoad()">
   <p><a href="#" onClick="showAlert();return false;">Show Alert</a></p>
   <p><a href="#" onClick="showConfirm();return false;">Show Confirmation</a></p>
   <p><a href="#" onClick="playBeep();return false;">Play Beep</a></p>
   <p><a href="#" onClick="vibrate();return false;">Vibrate</a></p>
</body>
</html>