我已阅读并遵循本网站或网络上有关如何使用 Jquery Mobile 将 NativeControls 插件添加到 PhoneGap(Cordova 1.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>

主要.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。

任何帮助将不胜感激!

最佳答案

我将源代码上传到 iTunes 商店中的 jQM 应用程序,该应用程序有一个 Tabbar 示例,可在 iPhone 和 iPad 上以两种方向运行。我希望它有帮助!!

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

关于ios - Phonegap NativeControls 不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10035821/

10-12 01:18