代码改变世界

谨此纪念我用phonegap中menubutton的“血泪史”

2011-11-25 11:26  呦菜  阅读(1499)  评论(0)    收藏  举报

前几天被phonegap中menubutton事件搞得头破血流，很简单的一段代码，但是点击菜单按钮一直不起作用。于是在QQ群，博客园，csdn各处发帖询问，最终没有人能解答，今天终于成功了，郁闷了这么多天，发个博客记录一下，同时希望能给遇见这种问题的朋友们提示一下。

以下是我的很简单的代码：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="phonegap-1.1.0.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" class="page">
	<div data-role="header" id="header"><h1>第 1 页</h1></div>
	<div data-role="content" id="wrapper">     
    
	</div>
	<div data-role="footer" id="footer">
		<h4>页面脚注</h4>
	</div>
</div>
</body>
<script type="text/javascript">
// 等待加载PhoneGap
document.addEventListener("deviceready", onDeviceReady, false); 
// PhoneGap加载完毕
function onDeviceReady() {
    //按钮事件
    document.addEventListener("menubutton", eventMenuButton, false); //菜单键

}

//菜单键
function eventMenuButton(){
    alert('点击了 菜单 按钮!');
}
</script>
</html>

 想实现菜单按钮，希望点击手机的菜单按钮能弹出“点击了 菜单 按钮!”，但是一直未成功。。。

说一下本人使用Dreamweaver cs5.5,android SDK 2.2，我这个版本的Dreamweaver自带的phonegap版本是0.9.3（如果没记错的话），应该算是老版本吧，后来经过测试发现是这个版本的phonegap不支持menubutton事件！于是想更新以下DW中phonegap得版本，在phonegap官网上下载了最新版本callback-phonegap-1.2.0-0，然后按照网上所说的教程更新了：

1. 下载最新版本的phonegap，请移步 www.phonegap.com
2. 将下载的zip压缩包解压至任意目录，打开其中的Android文件夹；
3. 将 phonegap-1.1.0.jar 的文件名称修改成 phonegap.jar；将phonegap-1.1.0.js的文件名称修改成phonegap.js；
4. 将上述修改名称的phonegap.jar拷贝并覆盖到Adobe的安装目录：D:\soft\Adobe\Adobe Dreamweaver CS5.5\configuration\NativeAppFramework\DWPhoneGap\android\PhoneGapApp \libs；
将phonegap.js拷贝并覆盖到Adobe的安装目录：D:\soft\Adobe\Adobe Dreamweaver CS5.5\configuration\NativeAppFramework\DWPhoneGap\android\PhoneGapApp \assets\www；
5. 将解压包内的xml文件夹直接拷贝到Adobe的安装目录：D:\soft\Adobe\Adobe Dreamweaver CS5.5\configuration\NativeAppFramework\DWPhoneGap\android\PhoneGapApp \res；

结果还是不成功，结果发现这个步骤不适用于callback-phonegap-1.2.0-0！只适用于phonegap-1.1.0，于是又下载了一个phonegap-1.1.0，结果就好使了~~

以下是我的代码：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0rc3.css" rel="stylesheet" type="text/css"/>
<link href="Css/style.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0rc3.js" type="text/javascript"></script>
<!-- 只要将当前站点配置为移动应用程序，则对 phonegap.js 的该引用将允许代码提示。
	 要将该站点配置为移动应用程序，请转至“站点”->“移动应用程序”->“配置应用程序框架...”-->
<script src="phonegap.js" type="text/javascript"></script>
</head>
<body> 

<div data-role="page" id="page">
	<div data-role="header">
		<h1>第 1 页</h1>
	</div>
	<div data-role="content">	
		<p id="deviceProperties">Loading device properties...</p>  

	</div>
	<div data-role="footer">
		<h4>页面脚注</h4>
	</div>
</div>
<script type="text/javascript">
// 等待加载PhoneGap
document.addEventListener("deviceready", onDeviceReady, false); 
// PhoneGap加载完毕
function onDeviceReady() {
    //按钮事件
	            var element = document.getElementById('deviceProperties');  

          
            //设备信息
            element.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 />';  


    document.addEventListener("menubutton", eventMenuButton, false); //菜单键

}

//菜单键
function eventMenuButton(){
    alert('点击了 菜单 按钮!');
}
</script>
</body>
</html>

 这个可以查看你现在的phonegap版本信息~~

另外一个需要注意：我的Dreamweaver引用phonegap的时候会出现，我的目录是：

要把引用改为才会正确引用~~