2012-04-05 7 views
3

이 사이트 또는 웹에서 NativeControls 플러그인을 Jquery Mobile을 사용하여 PhoneGap (Cordova 1.5)에 추가하는 방법을 읽고 따라 왔습니다. 툴바가 제대로 작동하지 못했습니다.Phonegap NativeControls가 작동하지 않습니다.

나는 운이없는 많은 다른 것들을 시도했다. 당신이 볼 수 있듯이, 내가 할

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(){ 

} 

A : :

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 여기 내 코드입니다

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.

도움이 될 것입니다.

답변

4

나는 또한 같은 투쟁을 겪었다. 생성자에 대한 오해가있을 수 있습니다.

내가 봤어 a post 충돌을 피하기 위해 여분의 줄을 추가하고 작동합니다!

+0

나는 이것을 시험해 보겠다. 고마워요! 내 결과를 게시하고 작동하는 경우 답변을 선택합니다! – c0d3Junk13

+0

해당 게시물의 코드를 테스트 한 후에도 여전히 작동하지 않지만 다음과 같은 코드를 보았습니다. Cordova.exec ("NativeControls.showTabBar", options); var onSelect = { "onSelect": onTabBarItem}; // onSelect = "hahaha"; – c0d3Junk13

+0

Cordova.exec ("NativeControls.createTabBarItem", "test", "test", "tabButton : Recents", onSelect); Cordova.exec ("NativeControls.createTabBarItem", "test2", "test2", "tabButton : 검색", onSelect); Cordova.exec ("NaviteControls. Cordova.exec ("NativeControls.showTabBarItems", "test", "test2", "test3"); Cordova.exec ("NativeControls", "test3", null) .selectTabBarItem ","test "); – c0d3Junk13

0

당신은 당신이 그렇지 않으면,이 라인에서 사용할 수 있습니다, main.js 파일의 상단에 변수로 nativeControls를 정의 할 필요는 JS는 정의되지 않은 변수에 대한 예외를 통해

nativeControls = window.plugins.nativeControls; 
+0

onDeviceReady 함수에서 그 작업을 수행합니다. 여전히 작동하지 않습니다 .. – c0d3Junk13

+0

왜 그런지 그렇지 않니? – c0d3Junk13

4

이는 것 내 코드와 그것을 작동 : NativeControls.js의 맨 끝에

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'); 

} 

, 그것은 확인을해야하므로 window.plugins.nativeControls 초기화 :

createTabBarItem을 호출하면 매개 변수가 5 개뿐입니다.이 매개 변수는 4 개뿐입니다. 네 번째 빈 매개 변수를 제거하고 테스트합니다. 어쩌면 onSelect 함수가 작동하지 않는 이유 일 수 있습니다.

관련 문제