JQuery-Mobile / Phonegap을 함께 사용하는 올바른 방법?

107

JQuery Mobile과 Phonegap을 함께 사용하는 올바른 방법 (현재까지)은 무엇입니까?

두 프레임 워크를 사용하려면 먼저로드해야합니다. 둘 다 사용하기 전에로드되었는지 어떻게 확인할 수 있습니까?

jquery  jquery-mobile  cordova 
— Juw
소스
11
제발! 답을 선택하세요 !!!
— realtebo 2013 년
그것을 가치가 비록 대답은 <3 선택 될 때까지, 나는 일이 안 갈거야
— 돈 본이
1
여기서 해결되는 실제 문제는 무엇입니까? index.html에서 jQuery 및 Cordova에 필요한 js 파일에 대한 참조를 제공 한 다음 jQuery의 $ .mobile.changePage를 사용하여 세 번째 js 파일에서 로그인 페이지로 리디렉션하면 어떻게됩니까? 이 디자인이 작동하지 않는 이유는 무엇이며 아래에 설명 된 솔루션이 필요한 이유는 무엇입니까? jQuery 및 / 또는 Cordova 내부에 비동기로드가 있고 2 개의 프레임 워크가로드되기 전에 세 번째 js 파일을로드 할 수 있기 때문입니까? 제안 해주세요. 감사합니다
— Mustafa
예를 들어 @Mustafa는 ondeviceReady이벤트가 JQM 코드에서 트리거되기 전에 데이터베이스에 액세스를 시도 할 수 있습니다 .
— Mirko

답변:

174

JQuery의 지연 기능을 사용할 수 있습니다.

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();

document.addEventListener("deviceReady", deviceReady, false);

function deviceReady() {
  deviceReadyDeferred.resolve();
}

$(document).one("mobileinit", function () {
  jqmReadyDeferred.resolve();
});

$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() {
  // TBD
}
— 로마 황제 옥타비우스
소스
3
이 답변은 더 많은 표를 얻고 올바른 것으로 표시되어야합니다.
— memical
4
좀 더 자세히 설명해 주시겠습니까? 파일 참조의 계층 구조는 어떻게됩니까? 감사합니다
— farjam
2
최신 버전을 사용하여 스크립트 로딩 순서를 추가해 주시겠습니까 ??
— realtebo 2013 년
7
작동하지 않는다고 말하는 모든 사람들에게 스크립트 선언 순서가 중요합니다. 먼저 jquery를 포함하고 스크립트 요소 안에이 코드를 포함시킨 다음 jquery mobile js를 포함합니다.
— Manish 2013 년
1
어때 cordova.js? JQM 이전 또는 이후에로드해야합니까?
— Ferdinand.kraft
17

위의 예를 기반으로 한 방법은 다음과 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <title>InforMEA</title>
    </head>
    <body>
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            var dd = $.Deferred();
            var jqd = $.Deferred();
            $.when(dd, jqd).done(doInit);

            $(document).bind('mobileinit', function () {
                jqd.resolve();
            });
        </script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
        <script type="text/javascript" src="cordova-2.2.0.js"></script>
        <script type="text/javascript">
            document.addEventListener('deviceready', deviceReady, false);
            function deviceReady() {
                dd.resolve();
            }

            function doInit() {
                alert('Ready');
            }
        </script>
    </body>
</html>
— 크리스티안 로마 네 스쿠
소스
이것은 나에게도 효과가 있었지만 html 태그가 닫히기 전에 같은 페이지에 <div id = "test-index-page"data-role = "page"> </ div>를 추가하면 페이지가로드되지 않고 오류가 발생합니다. . 둘 다로드 된 지점에서 세 번째 js 파일을 사용하여 두 프레임 워크 사용을 시작하고 싶습니다. 어떻게하나요?
— Mustafa
물론 doInit ()에서 내 앱에 대한 비즈니스 로직이있는 세 번째 js 파일을로드하려고했지만 작동하지 않았습니다. 해당 파일에는 이벤트 바인딩 논리와 함수 선언이 있습니다. 예 : $ (document) .delegate ( '# fakhera-index-page', 'pageinit', function (event) {...}. 어떻게해야합니까?
— Mustafa
7

jquery mobile과 함께 phonegap을 사용하려면 다음과 같이 사용해야합니다.

<head>
<title>Index Page</title>

<!-- Adding viewport -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- Adding jQuery scripts -->
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>

<!-- Since jQuery Mobile relies on jQuery core's $.ajax() functionality,
 $.support.cors & $.mobile.allowCrossDomainPages must be set to true to tell
 $.ajax to load cross-domain pages. -->
<script type="text/javascript">
    $(document).bind("mobileinit", function() {
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
</script>

<!-- Adding Phonegap scripts -->
<script type="text/javascript" charset="utf-8"
    src="cordova/cordova-1.8.0.js"></script>

<!-- Adding jQuery mobile scripts & CSS -->
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript"
    src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>

</head>
<script type="text/javascript">
    // Listener that will invoke the onDeviceReady() function as soon as phonegap has loaded properly
    document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
        navigator.splashscreen.hide();

        document.addEventListener("backbutton", onBackClickEvent, false); // Adding the back button listener    

    }
    </script>
<body>
<div data-role="page" id="something" data-ajax="false">
        <script type="text/javascript">
            $("#something").on("pageinit", function(e) {

            });

            $("#something").on("pageshow", function(e) {

            });

            $("#something").on("pagebeforeshow", function(e) {

            });
        </script>

        <div data-role="header">            
        </div>

        <div data-role="content">           
        </div>      
    </div>
</body>
— Coder_sLaY
소스
6

많은 사람들이 당신이 어떤 순서 상관하지 않는만큼 괜찮은 옵션입니다 이연 사용하여 제안 deviceready하고 mobileinit, 내가 몇했습니다.에하지만 내 경우에는 happe을 pageshow응용 프로그램을 처음로드 할 때 이벤트 mobileinit및 확장하여 그 pageshow/ pagebeforeshow/ 등 이벤트를했다 deviceready완료 되기 전에 모두 발사 되었으므로 deferred를 사용하여 제대로 바인딩 할 수 없었습니다. 이 경쟁 조건은 좋은 것이 아닙니다.

내가해야 할 일은 ' deviceready'가 이미 해고 될 때까지 'mobileinit'이 일어나지 않도록하는 것이 었습니다. mobileinitJQM을로드 할 때 즉시 실행 되기 때문에 이미 완료된 jQuery.getScript후에로드하는 데 사용 하기로 선택했습니다 deviceready.

<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/async.min.js"></script>
<script src="js/app.js"></script>
<script>
  document.addEventListener(
    'deviceready',
    function () {
      $('body').css('visibility', 'hidden');
      $(document).one("mobileinit", function () {
        app.init();
        $('body').css('visibility', '');
      });
      $.getScript('js/jquery.mobile-1.2.0.min.js');
    },
    false
  );
</script>

내가 본문을 숨기는 이유는이 방법의 부작용이 jquery.mobile이로드되기 전 원본 HTML 문서의 가시성의 0.5 초이기 때문입니다. 이 경우 스타일이 지정되지 않은 문서를 보는 것보다 0.5 초의 빈 공간을 추가로 숨기는 것이 좋습니다.

— 제프리 반 알 스틴
소스
1
답변에 +1하면 약간의 변화로 문제를 해결할 수있었습니다. 먼저 body.hide () 코드를 onBodyLoad (); 둘째, body.show () 코드를 getScript (jQM_PATH); 왜냐하면 mobileInit ()는 각 JQM 페이지 전환에서 호출되기 때문입니다. 이상적이지 않습니다. 이것이 다른 사람들에게 도움이되기를 바랍니다.
— GeorgeW 2013
나머지 만 포함시킬 수 있습니까?index.html
— JGallardo 2013
cordova가 <script>태그를 사용하여 포함되지 않은 모든 파일을 제거했기 때문에 이것은 나를 위해 작동하지 않았습니다 .
— Chris Snow
2

지연 기능을 사용할 필요가 없다고 생각합니다. (이것이 최신 버전의 phonegap에서는 필요하지 않을 수도 있습니까?) index.html 파일의 헤드에이 파일이 있으며 모든 것이 잘 작동합니다. jquery, phonegap 및 jquery mobile을 포함하는 순서가 중요하다고 생각합니다.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <!-- Adding jQuery -->
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

    <!-- Add Phonegap scripts -->
    <script type="text/javascript" src="phonegap.js"></script>

    <!-- Add jQuery mobile -->
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
    <script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>

    <title>MY TITLE</title>
</head>
— Allie Hoch Janoch
소스
1

이것은 나를위한 일입니다. dhaval 기반, sqlite를 사용하여 배울 때이 샘플

<!DOCTYPE html>
<html>
 <head>
<title>Cordova Sqlite+Jquery</title>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.3.min.js"></script>   
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">`

// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-1.8.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

// Populate the database 
//
function populateDB(tx) {
    tx.executeSql('DROP TABLE IF EXISTS DEMO');
    tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)');
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")');
    tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');
}

// Query the database
//
function queryDB(tx) {
    tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB);
}

// Query the success callback
//
function querySuccess(tx, results) {
    var len = results.rows.length;
    //console.log("DEMO table: " + len + " rows found.");
    $('#result').html("DEMO table: " + len + " rows found.");
    var listval = '';
    for (var i=0; i<len; i++){
        //console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data);
         listval += '<li>'+ results.rows.item(i).data + '[' + results.rows.item(i).id + '] </li>';
    }

    $('#listItem').html(listval);

}

// Transaction error callback
//
function errorCB(err) {
    console.log("Error processing SQL: "+err.code);
}

// Transaction success callback
//
function successCB() {
    var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
    db.transaction(queryDB, errorCB);
}

// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
    // Now safe to use the Cordova API
    //alert('ready');
    var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);
    db.transaction(populateDB, errorCB, successCB);
    //$('#result').html('hello');
}

</script>
  </head>
 <body onload="onLoad()">
  <div>result:</div><div id="result"></div>
  <ul id="listItem">
  </ul>
 </body>
 </html>
— Ztuons Ch
소스
0

@Jeffrey의 답변을 구축하기 위해 JQM이 페이지 처리를 완료하고 첫 번째 페이지 요소를 렌더링 할 때까지 HTML 마크 업을 숨기는 훨씬 깔끔한 방법을 찾았습니다. JQM이 렌더링되기 전에 베어 마크 업이 1/2 초 깜박이는 것을 발견했기 때문입니다.

css ... PageShow () by JQM으로 모든 마크 업을 숨기면 가시성이 전환됩니다. 




//snip
<style type="text/css">
.hide {
  display:none;
}
</style>

//snip - now the markup notice the hide class
<div id="page1" data-role="page" class="hide">
     //all your regular JQM / html form markup
</div>

//snip -- down to the end of /body
<script src="cordova-2.2.0.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
   document.addEventListener(
     'deviceready',
      function () {
         $(document).one("mobileinit", function () {
         //any JQM init methods

       });
      $.getScript('js/jquery.mobile-1.2.0.min.js');
   },
   false);
</script>

— 에릭
소스
귀하의 제안을 시도했지만 작동하지 않았습니다. JQM pageshow는 숨겨진 첫 페이지를 표시하지 않습니다. 또한 표준 HTML은 여전히 ​​숨겨지기 전에 표시됩니다. 나는 결국 타이밍이 약간 변경된 Jeffrey의 솔루션을 기반으로 작동하도록 만들었습니다. 그의 대답 아래 내 의견을 참조하십시오.
— GeorgeW 2013
0

다음은 PG 2.3 및 JQM 1.2에서 나를 위해 일했습니다. Facebook Connect 플러그인 :

<head>
<script src="./js/jquery-1.8.2.min.js"></script>
<script>
    $.ajaxSetup({
        dataType : 'html'
    });

    var dd = $.Deferred();
    var jqd = $.Deferred();
    $.when(dd, jqd).done(function() {                

        FB.init({ appId: auth.fbId, nativeInterface: CDV.FB, useCachedDialogs: false });
    });

    $(document).bind('mobileinit', function () {
        jqd.resolve();
    });                        
</script>
<script src="./js/jquery.mobile-1.2.0.min.js"></script>
<script>
    $.mobile.loader.prototype.options.text = "loading";
    $.mobile.loader.prototype.options.textVisible = true;
    $.mobile.loader.prototype.options.theme = "a";
    $.mobile.loader.prototype.options.html = "";

    $.mobile.ajaxEnabled = false;
    $.mobile.allowCrossDomainPages = true;
    $.support.cors = true;       

    $('[data-role=page]').live('pagecreate', function(event) {                      
        tpl.renderReplace('login', {}, '#content-inner', function() {                   
            auth.init();
        });
    });
</script>
<script src="./js/cordova-2.3.0.js"></script>
<script src="./js/cdv-plugin-fb-connect.js"></script>
<script src="./js/facebook_js_sdk.js"></script>                     
<!--some more scripts -->
<script>        
    document.addEventListener('deviceready', function() {
        dd.resolve();
    }, false);                        
</script>  
<head>
— Jens Peters
소스
-1

PhoneGap 로딩은 jQuery 로딩과 약간 다릅니다. jQuery는 유틸리티 라이브러리로 더 많이 작동하므로이를 포함하면 즉시 사용할 수 있습니다. 반면에 PhoneGap은 적절한 초기화를 위해 네이티브 코드의 지원이 필요하므로 페이지에 포함 된 직후 사용할 준비가되지 않습니다.

Phonegap은 deviceready네이티브 특정 코드를 실행하는 이벤트 를 등록하고 대기 할 것을 제안합니다 .

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Example</title>

    <script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
    <script type="text/javascript">
        // jquery code here
    </script>
    <script type="text/javascript" charset="utf-8" src="lib/android/cordova-1.7.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    function onLoad(){
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // Cordova is ready
    function onDeviceReady() {
        // write code related to phonegap here
    }
    </script>
  </head>
  <body onload="onLoad()">
    <h1>Phonegap Example</h1>
  </body>
</html>

자세한 내용은 문서를 확인하십시오.

— 다발
소스
1
하지만 문제는 jquery 코드에서 phonegap 물건을 사용하고 싶다는 것입니다. 귀하의 예제에서 모든 jquery 코드는 phonegap 이로 드되기 전에 실행됩니다. onDeviceReady () 함수 안에 모든 코드를 넣는다면? 다음과 같이 : $ ( "# form"). live ( "pageinit", function (event) {// phonegapp stuff here});
— Juw
당신 #form이 첫 페이지라면 pageinit너무 늦었 기 때문에 콜백을 받지 못할 것입니다
— dhaval
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.