在jquery mobile中打开面板时如何防止页面被拖动？
Posted
技术标签:
【中文标题】在jquery mobile中打开面板时如何防止页面被拖动？【英文标题】：How to prevent page been dragged when panel is open in jquery mobile? 【发布时间】：2014-01-24 08:56:48 【问题描述】：当我在 swiperight 上打开面板然后在 swipeleft 上关闭时，如果我按下太多然后向左滑动，面板不会关闭，而是将我移动到面板仍然打开的主要内容和主要内容的一半内容为空白我该如何解决这是我的 html 代码。仅当我按住 1 秒钟然后用手机上的手指移动时才会发生这种情况。
这是我的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');
);
);
【问题讨论】：
【参考方案1】：制作面板dismissible。这意味着如果有人点击它，它将关闭。
【讨论】：
以上是关于在jquery mobile中打开面板时如何防止页面被拖动？的主要内容，如果未能解决你的问题，请参考以下文章
单击打开 jQuery Mobile 面板小部件时的 Google 地图指针