PhoneGap的NativeControls不工作(Phonegap NativeControls

2019-09-16 09:18发布

我已阅读并跟随在本网站或如何添加NativeControls插件的PhoneGap(科尔多瓦1.5)网络与jQuery Mobile的教程。 我一直没能得到的工具栏的正常工作。

我已经尝试了很多不同的东西,没有运气。 这里是我的代码:

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关键Cordova.plist作为NativeControls - NativeControls。

任何帮助将不胜感激!

Answer 1:

我上载于iTunes的商店具有的TabBar的工作无论是iPhone和iPad,在两个方向的示例的源代码,以我的JQM应用程序。 我希望它能帮助!

http://zsprawl.com/iOS/2012/04/nativecontrols-plugin-for-cordovaphonegap/



Answer 2:

我也遭遇了同样的斗争。 有可能是在构造一些误解。

我看到一个帖子 ,其中加入一些额外的线路,以避免任何冲突和它的作品!



Answer 3:

这是我的代码,它的工作原理:

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功能无法正常工作。



Answer 4:

你需要在main.js文件的顶部定义nativeControls为变量,那么您可以在此行中使用它,否则JS会通过有关未定义变量异常

 nativeControls = window.plugins.nativeControls;


文章来源: Phonegap NativeControls not working