我已阅读并遵循了本网站或Web上的教程，了解如何使用Jquery Mobile将NativeControls插件添加到PhoneGap(Cordova 1.5).我无法使工具栏正常工作.
I've read and followed tutorials on this site or the web on how to add the NativeControls plugin to PhoneGap (Cordova 1.5) with Jquery Mobile. I haven't been able to get the toolbar to work properly.
我没有运气就尝试了许多不同的事情.这是我的代码:
I've tried many different things with no luck. Here is my code:
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 www.JSON/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 iosdevelopertips/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变量中是否包含任何内容.我没有收到任何警报. 我什至尝试过:
to test if nativeControls variable has anything in it. I don't get any alerts. I even tried:
navigator.notification.alert(window);没有运气.我已经将NativeControls键添加到Cordova.plist中，如下所示: NativeControls-NativeControls.
with no luck. I've added the NativeControls key to Cordova.plist as NativeControls - NativeControls.
任何帮助将不胜感激！
推荐答案我将源代码上传到iTunes商店上的jQM App中，其中有一个Tabbar示例可在iPhone和iPad上双向使用的示例.希望对您有帮助！
I uploaded the source code to my jQM App on the iTunes' store that has an example of the Tabbar working on both the iPhone and iPad, in both orientations. I hope it helps!!
zsprawl/iOS/2012/04 /nativecontrols-plugin-for-cordovaphonegap/
更多推荐
Phonegap NativeControls无法正常工作
发布评论