Phonegap NativeControls不工作
Phonegap NativeControls不工作
提问于 2012-04-06 04:50:28
我在这个网站或网站上阅读并关注了有关如何使用Jquery Mobile将NativeControls插件添加到PhoneGap (Cordov1.5)的教程。我还没能让工具栏正常工作。
我尝试过很多不同的方法，但都没有成功。下面是我的代码：
html：
<!DOCTYPE html>
<html>
<head>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />-->
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="jquery/jquery.mobile-1.0.1.min.css"/>
<script src="jquery/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="jquery/jquery.mobile-1.0.1.min.js"></script>
<title></title>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script src="NativeControls.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="mainpage">
<div data-role="header">
<h1>LOGIN</h1>
</div>
<div data-role="content">
<img src="images/cslogosmall2.png" style="margin-top: -10px; margin-left: -5px;"/>
<form id="login" method="post">
<p>
<ul data-role="listview" data-theme="g" id="contentlist">
<b>Program:</b>
<input type="text" id="program"/>
<b>Username:</b>
<input type="text" id="username"/>
<b>Password:</b>
<input type="password" id="password"/>
</ul>
</p>
<br/>
<button type="submit" data-theme="a" id="submit" value="Submit"></button>
</form>
</div>
<!--<div data-role="footer">
<h1> Main Page Footer </h1>
</div>-->
</div>
<div data-role="page" id="contentpage">
<div data-role="header">
<h1> Content Page </h1>
</div>
<div data-role="content">
<a href="#" data-role="button" onclick="history.go(-1);return false;" onClick=buttonDemo()> Back to Main Page </a>
<a href="#" data-role="button" id="beepbtn" onClick=beepbeep()> Beep!</a>
</div>
<div data-role="footer">
<h1> Content Page Footer </h1>
</div>
</div>
</body>
</html>main.js：
function onBodyLoad()
{
$('#submit').click(function() {
var program = document.getElementById('program').value;
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (!program || program == "") {
alert("Please enter a program");
return false;
}
else if (!username || username == "") {
alert("Please enter a username");
return false;
}
else if (!password || password == "") {
alert("Please enter a password");
return false;
}
return true;
});
document.addEventListener("deviceready", onDeviceReady, false);
}
/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady() {
// Initializating TabBar
navigator.notification.alert("Cordova is working");
nativeControls = window.plugins.nativeControls;
navigator.notification.alert(nativeControls);
nativeControls.createTabBar();
// Books tab
nativeControls.createTabBarItem(
"books",
"Books",
//"/www/tabs/book.png",
"",
{"onSelect": function() {
books();
}}
);
// Stats tab
nativeControls.createTabBarItem(
"finished",
"Finished",
//"/www/tabs/box.png",
"",
{"onSelect": function() {
finished();
}}
);
// About tab
nativeControls.createTabBarItem(
"about",
"About",
//"/www/tabs/info.png",
"",
{"onSelect": function() {
about();
}}
);
// Compile the TabBar
nativeControls.showTabBar();
nativeControls.showTabBarItems("books", "finished", "about");
nativeControls.selectTabBarItem("books");
}
function books() {
}
function about() {
}
function finished(){
}如你所见，我做了一个：
navigator.notification.alert("Cordova is working");
nativeControls = window.plugins.nativeControls;
navigator.notification.alert(nativeControls);
nativeControls.createTabBar();测试nativeControls变量中是否包含任何内容。我没有收到任何警报。我甚至试过：
navigator.notification.alert(window);不走运。我已经将NativeControls密钥作为NativeControls - NativeControls添加到Cordova.plist。
任何帮助都将不胜感激！
回答 4
Stack Overflow用户
发布于 2012-04-13 11:40:26
我将源代码上传到我在iTunes商店上的jQM应用程序中，其中有一个在iPhone和iPad两个方向上均可使用的标签栏示例。我希望它能有所帮助！！
http://zsprawl.com/iOS/2012/04/nativecontrols-plugin-for-cordovaphonegap/
Stack Overflow用户
发布于 2012-04-08 18:45:04
我也经历了同样的挣扎。可能对构造器有一些误解。
我看到了a post，其中几乎没有添加额外的行，以避免任何冲突，并且它可以工作！
Stack Overflow用户
发布于 2012-04-12 12:29:18
这是我的代码，它是有效的：
function onDeviceReady()
{
var nc = window.plugins.nativeControls;
nc.createTabBar();
nc.createTabBarItem('whoTabItem', 'Quem?', '', null);
nc.createTabBarItem('whereTabItem', 'Onde?', '', null);
nc.createTabBarItem('whatTabItem', 'O que?', '', null);
nc.showTabBar();
nc.showTabBarItems('whoTabItem', 'whereTabItem', 'whatTabItem');
}在NativeControls.js的最后，window.plugins.nativeControls被初始化，所以它应该是OK的：
if(!window.plugins)
window.plugins = {};
window.plugins.nativeControls = new NativeControls();您对createTabBarItem的调用有5个参数--只有4个。删除第四个空参数并进行测试。也许这就是你的onSelect函数不能工作的原因。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10035821
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号