복붙노트

[JQUERY] JQuery와 모바일 / 폰갭를 함께 사용의 올바른 방법은?

JQUERY

JQuery와 모바일 / 폰갭를 함께 사용의 올바른 방법은?

해결법

  1. 1.당신은 JQuery와 이연 기능을 사용할 수 있습니다.

    당신은 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
}

  2. 2.다음은 위의 예제를 기반으로, 나를 위해 일한 방법

    다음은 위의 예제를 기반으로, 나를 위해 일한 방법

    <!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>

  3. 3.JQuery와 모바일과 함께 사용 폰갭하기 위해, 당신은 다음과 같이 사용합니다

    JQuery와 모바일과 함께 사용 폰갭하기 위해, 당신은 다음과 같이 사용합니다

    <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>

  4. 4.많은 사람들이 사용하는 제안 같이 당신이 deviceready 및 mobileinit happe를 주문하십시오.하지만 내 경우에는 내가 약간의 pageshow 응용 프로그램이 처음로드 이벤트 및 mobileinit 및 확장 사람들의 pageshow가 필요하든 상관하지 않는만큼 괜찮은 옵션입니다 연기 내가 제대로 그들에 연기 사용하여에 바인딩 할 수 있도록 / pagebeforeshow / 등 이벤트, deviceready 완성하기 전에 모든 발사했다. 이 경쟁 조건이 좋은 일이 아니 었습니다.

    많은 사람들이 사용하는 제안 같이 당신이 deviceready 및 mobileinit happe를 주문하십시오.하지만 내 경우에는 내가 약간의 pageshow 응용 프로그램이 처음로드 이벤트 및 mobileinit 및 확장 사람들의 pageshow가 필요하든 상관하지 않는만큼 괜찮은 옵션입니다 연기 내가 제대로 그들에 연기 사용하여에 바인딩 할 수 있도록 / pagebeforeshow / 등 이벤트, deviceready 완성하기 전에 모든 발사했다. 이 경쟁 조건이 좋은 일이 아니 었습니다.

    내가 무엇을 필요로하는 것은 반드시 'mobileinit'make가 'deviceready가'이미 해고 된 후까지 발생하지 않았다이었다. mobileinit 화재가 즉시로드 할 때 때문에 JQM 나는 deviceready 이미 끝난 후로드 할 jQuery.getScript를 사용하기로 결정했습니다.

    <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 문서의 가시성의 절반 두 번째 것입니다. 이 경우 숨어 그것은 빈 공간의 여분의 반 두 번째는 스타일이 적용되지 않은 문서를보고하는 것이 바람직하다.

  5. 5.나는 연기 기능을 사용할 필요가 없습니다 믿습니다. 내 index.html을 파일의 머리에이를 (어쩌면 이것은? 폰갭의 새로운 버전 필요가 없습니다) 모든 것이 잘 작동합니다. 나는 JQuery와, 폰갭 및 JQuery와 모바일 등의 순서가 중요하다고 생각 해요.

    나는 연기 기능을 사용할 필요가 없습니다 믿습니다. 내 index.html을 파일의 머리에이를 (어쩌면 이것은? 폰갭의 새로운 버전 필요가 없습니다) 모든 것이 잘 작동합니다. 나는 JQuery와, 폰갭 및 JQuery와 모바일 등의 순서가 중요하다고 생각 해요.

    <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>

  6. 6.이 나를 위해 일이다. dhaval,이 샘플에 대한 기본 I SQLite는을 사용하여 학습

    이 나를 위해 일이다. dhaval,이 샘플에 대한 기본 I 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>

  7. 7.제프리의 대답 @에 구축하기 위해, 나는 JQM이 완료 될 때까지 페이지를 처리하는 HTML 마크 업을 숨기고 나는 JQM 전에 베어 마크 업의 1/2 초 깜박임이 렌더링 것으로 나타났습니다 이후, 첫 번째 페이지 요소를 렌더링 훨씬 청소기 방법을 발견했다.

    제프리의 대답 @에 구축하기 위해, 나는 JQM이 완료 될 때까지 페이지를 처리하는 HTML 마크 업을 숨기고 나는 JQM 전에 베어 마크 업의 1/2 초 깜박임이 렌더링 것으로 나타났습니다 이후, 첫 번째 페이지 요소를 렌더링 훨씬 청소기 방법을 발견했다.

    당신은 CSS로 모든 마크 업을 숨길 필요가 ... JQM으로의 pageshow ()는 당신을위한 가시성을 전환됩니다.

    //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>

  8. 8.다음은 PG 2.3 JQM 1.2, 포함에 날 위해 일했습니다. 페이스 북에 연결 플러그인 :

    다음은 PG 2.3 JQM 1.2, 포함에 날 위해 일했습니다. 페이스 북에 연결 플러그인 :

    <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>

  9. 9.폰갭의로드 jQuery를로드보다 약간 다릅니다. 당신이하고 즉시 사용할 수있는 것을 포함하므로 jQuery를이 유틸리티 라이브러리로 더 작동합니다. 페이지에 포함 된 후 곧 사용할 준비가되지 않도록 다른 한편으로 폰갭 적절한 초기화를위한 네이티브 코드에서 지원이 필요합니다.

    폰갭의로드 jQuery를로드보다 약간 다릅니다. 당신이하고 즉시 사용할 수있는 것을 포함하므로 jQuery를이 유틸리티 라이브러리로 더 작동합니다. 페이지에 포함 된 후 곧 사용할 준비가되지 않도록 다른 한편으로 폰갭 적절한 초기화를위한 네이티브 코드에서 지원이 필요합니다.

    폰갭 등록 및 네이티브 특정 코드를 실행 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>

    추가 정보를 확인 문서의 경우

    10. from https://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 순수 JS 또는 jQuery를 함께 이스케이프 키를 누르 감지?  (0) 2020.10.23
[JQUERY] 오버 플로우는 사용자가 스크롤 맨 아래까지 스크롤 DIV하지 않는 한 계속  (0) 2020.10.23
[JQUERY] 데이터가로드 된 후 어떻게있는 jqGrid의 열 너비를 조정하려면?  (0) 2020.10.23
[JQUERY] 대신 토글`어떻게 사용하는 (...)`> 1.8 jQuery를에?  (0) 2020.10.23
[JQUERY] 구글 reCAPTCHA를 어떻게 요구하려면?  (0) 2020.10.23
,

티스토리툴바