1
swiperight에서 패널을 연 다음 swipeleft에서 닫을 때 너무 많이 누르고 너무 왼쪽으로 스 와이프하면 패널이 닫히지 않고 여전히 열려있는 패널과 주 콘텐츠의 절반으로 주 콘텐츠로 이동합니다 비어 있습니다. 여기 어떻게 내 HTML 코드를 수정할 수 있습니까? 이것은 1 초 동안 누르고 손가락으로 휴대 전화로 움직이는 경우에만 발생합니다.jquery mobile에서 패널이 열려있을 때 페이지가 드래그되지 않도록하는 방법은 무엇입니까?
이 내 html 코드입니다 :
<!DOCTYPE html>
<html>
<head>
<meta 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/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="js/panel.js"></script>
<title>Photosi</title>
</head>
<body>
<div data-role="page" id='main-page'>
<div data-role='panel' id='main-panel' data-display='reveal'>
<ul data-role='listview'>
<li><a href='#' data-role='button' data-icon='camera' data-iconpos='left'>Albums</a></li>
<li><a href='#' data-role='button' data-icon='user' data-iconpos='left'>Social</a></li>
<li><a href='#' data-role='button' data-icon='star' data-iconpos='left'>Effects</a></li>
<li><a href='#' data-role='button' data-icon='arrow-u' data-iconpos='left'>Upload</a></li>
<li><a href='#' data-role='button' data-icon='gear' data-iconpos='left'>Settings</a></li>
<li><a href='#' data-role='button' data-icon='info' data-iconpos='left'>Help</a></li>
<li><a href='#' data-role='button' data-icon='delete' data-iconpos='left'>Exit</a></li>
</ul>
</div>
<div data-role="header">
<a href='#main-panel' class='ui-btn ui-icon-grid ui-btn-icon-notext ui-corner-all'></a>
<h1>Albums</h1>
</div>
<div role="main" class="ui-content">
<p>Page content goes here.</p>
<a href='#mypanel' class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all"></a>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
이 내 패널 JS 코드 :
$(document).on("pagecreate", "#main-page", function() {
$(document).on("swiperight", "#main-page", function(e) {
if ($(".ui-page-active").jqmData("panel") !== "open"){
$('#main-panel').panel('open');
}
});
$(document).on("swipeleft", "#main-page", function(e) {
if ($(".ui-page-active").jqmData("panel") == "open"){
$('#main-panel').panel('close');
}
});
});