반응형
JQuery-Mobile/Phonegap을 함께 사용하는 올바른 방법은 무엇입니까?
JQuery Mobile과 Phonegap을 함께 사용하는 올바른 방법은 무엇입니까?
두 프레임워크를 모두 로드해야 사용할 수 있습니다.사용하기 전에 둘 다 로딩되어 있는지 확인하려면 어떻게 해야 합니까?
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
}
위의 예를 바탕으로 저에게 적용된 방법은 다음과 같습니다.
<!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>
jquery mobile과 함께 폰갭을 사용하기 위해서는 이렇게 사용해야 합니다.
<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>
많은 사람들이 당신이 어떤 순서를 상관하지 않는 한 연기된 것을 사용하는 것이 괜찮은 선택이라고 제안했습니다.deviceready그리고.mobileinit끼여들다하지만 저 같은 경우엔 몇 개가 필요했어요pageshow응용 프로그램이 처음 로드될 때 이벤트 및mobileinit게다가 그것들은pageshow/pagebeforeshow/etc 이벤트들은 모두 그 전에 발사되었습니다.deviceready완성이 되어서, 저는 그들에게 유예금을 사용해서 그들을 제대로 묶을 수가 없었습니다.이 경주 조건은 좋은 것이 아니었습니다.
제가 해야 할 일은 '모바일 이니트'가 '이후'까지 발생하지 않도록 하는 것이었습니다.deviceready' 이미 해고당했습니다왜냐면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 loads 전에 HTML 원본 문서가 0.5초만에 보이는 부작용이 있기 때문입니다.이 경우 스타일 없는 문서를 보는 것보다 빈 공간을 0.5초 더 숨기는 것이 좋습니다.
저는 연기된 기능을 사용할 필요가 없다고 생각합니다.(새로운 버전의 폰갭에서는 이것이 필요하지 않을 수도 있습니까?)제 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>
이것은 나를 위한 일입니다. 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>
@Jeffrey의 답변을 기반으로, 저는 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>
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>
PhoneGap의 loading은 jQuery의 loading과 약간 다릅니다. jQuery는 유틸리티 라이브러리로 더 잘 작동하기 때문에 당신은 그것을 포함하고 즉시 사용할 수 있습니다.반면에 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>
자세한 내용은 문서를 확인합니다.
언급URL : https://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together
반응형
'sourcecode' 카테고리의 다른 글
| $exceptionHandler에서 $location - 종속성 충돌 (0) | 2023.10.05 |
|---|---|
| mysql 루트 사용자 권한 손실 (0) | 2023.10.05 |
| jquery를 사용하여 div 태그 값 설정 (0) | 2023.10.05 |
| 파이썬으로 BDD 연습하기 (0) | 2023.10.05 |
| Kubernetes 외부 MariaDB PXC 클러스터 노드 로드 밸런싱/페일오버 방법 (0) | 2023.10.05 |