0
하이브리드 Android 앱 (phonegap)으로 지정된 html + onsenui + jQuery 앱을 개발했지만 레이아웃 및 클릭/터치 문제가 있습니다. 이벤트가 작동하지 않습니다. 이 같은jquery 클릭/터치 이벤트가 phonegap을 통해 번들로 제공되는 하이브리드 앱에서 작동하지 않습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script>
function showModal() {
var modal = document.querySelector('ons-modal');
modal.show();
var i = 1
var myTimer = setInterval(function(){
$("#message").html(i);
if (i <= 30){
i += 1;
}
}, 1000);
setTimeout(function() {
modal.hide();
clearInterval(myTimer);
$("#message").html("");
ons.notification.toast({message: "Now you are free to open/close again.", timeout: 2000});
}, 30000);
}
$(function(){
$('#btn-outdoor-open').on("click touchend", function() {
$.ajax({
url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
showModal();
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000});
}
});
});
$('#btn-indoor-open').on("click touchend", function() {
$.ajax({
url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
showModal();
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000});
}
});
});
$('#btn-both-open').on("click touchend", function() {
$.ajax({
url: 'http://localhost:5000/inner_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for inner doors..', timeout: 3000});
ons.notification.toast({message: '5 seconds delay before another switch', timeout: 3000});
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000})
}
});
setTimeout(function(){
$.ajax({
url: 'http://localhost:5000/outer_door/2JkHmmbv4gA6mXLF',
type: 'POST',
success: function (result) {
if (result["response"] == "Not Authorized"){
ons.notification.toast({message: result["response"], timeout: 1000});
}
else{
ons.notification.toast({message: result["response"], timeout: 1000});
ons.notification.toast({message: 'Switching on relay for outer doors..', timeout: 3000});
showModal();
}
},
error: function(xhr, textStatus, errorThrown){
ons.notification.toast({message: 'Failed', timeout: 3000});
}
});
}, 5000);
});
});
</script>
</head>
<body style="font-family: monospace;">
<ons-page>
<div id="btn-outdoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #0F2043; color: white;">
<h2>Outer</h2>
<ons-ripple></ons-ripple>
</div>
<div id="btn-indoor-open" style="height: 33.33%; text-align: center; padding-top: 17%; background-color: #79CEDC;">
<h2>Inner</h2>
<ons-ripple></ons-ripple>
</div>
<div id="btn-both-open" style="height: 33.34%; text-align: center; padding-top: 17%; background-color: #D5A458;">
<h2>Both</h2>
<ons-ripple></ons-ripple>
</div>
</ons-page>
<ons-modal direction="up">
<div style="text-align: center">
<p>
Operation takes 30 seconds to finish<br><br>
<ons-icon icon="md-spinner" size="28px" spin></ons-icon><br><br>
<span id="message"></span><br><br>
</p>
</div>
</ons-modal>
</body>
</html>
신청해야 외모 : 여기
코드입니다 내가 전화 갭 응용 프로그램을 번들 경우
는하지만 다음과 같습니다
내가 의심 전체 jquery 코드가 모바일에서는 작동하지 않지만 onSenui 튜토리얼 도구에서는 제대로 작동합니다. 모바일 장치에서 감동적인 이벤트 및/또는 jQuery가 작동하지 않는 이유는 무엇입니까? 당신은 단지 index.html을, 내가 모나카 클라우드로 이동하려고
등 어떤 프로젝트 구조, 설정 파일은, 최소한의 기능 onsenui 프로젝트를 생성하지 않으며, 광산에 자바 스크립트 코드를 대체 나는 것을
jquery와 onsenui의 CDN 버전으로 인해 문제가 발생할 가능성이 있습니까? – radicz