【发布时间】：2014-11-28 15:10:28
【问题描述】：
我已经使用 Bootsrap 和 jQuery mobile 为 toch 设备创建了网页。
页面在页面中间包含一个轮播，根据用户的滑动向左/向右滑动。 页面包含Jquery Mobile panel，只有在用户向右滑动时才会打开。
我的问题是如果用户在 carousal 上向右滑动，面板会自动打开。我希望当用户在右侧边缘向右滑动（大约 75 像素）然后只有面板必须打开。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bxxloder and JQM</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.1.min.css">
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bxslider/jquery.bxslider.js"></script>
<script src="jqm/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<!--#########################JQM#########################-->
<div class="container-fluid" id="demo-page" data-url="demo-page">
<div data-role="panel" id="left-panel" data-theme="b">
<p>Left reveal panel.</p>
<a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right">Close</a>
</div><!-- /panel -->
<div data-role="panel" id="right-panel" data-display="overlay" data-position="right" data-theme="b">
<p>Right push panel.</p>
<a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-right">Close</a>
</div><!-- /panel -->
<!--#########################//JQM#########################-->
<!--#########################Bx slider#########################-->
<section class="row col-lg-10" style="float: none; margin: 0 auto;">
<ul class="bxslider">
<li><img src="image/b.png" title="Funky roots" /></li>
<li><img src="image/b.png" title="The long and winding road" /></li>
<li><img src="image/b.png" title="Happy trees" /></li>
</ul>
</section>
<!--######################### End Swipe Carousel ##############################-->
</div>
<script>
$(document).ready(function()
{
$('.bxslider').bxSlider(
{
mode: 'horizontal',
captions: true,
auto: true,
touchEnabled: true,
oneToOneTouch: true,
/* controls: false,*/
pager: false,
speed: 200
});
});
</script>
<script>
$(document).on("pagecreate", function()
{
$(document).on("swipe", function(e)
{
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
//if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" )
if($(".ui-page-active").jqmData("panel") !== "open" && !$(e.target).hasClass("bxslider"))
{
if(e.type === "swipe")
{
$("#right-panel").panel("open");
}
else if(e.type === "swipe")
{
$("#left-panel").panel("open");
}
}
});
});
</script>
</body>
</html>
【问题讨论】：
-
在
if语句中添加另一个条件if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" && !e.target.hasClass("bxslider")) -
更正：
!$(e.target).hasClass("bxslider")应该是一个 jQuery 对象。 -
@Omar：代码已根据评论更新，现在整个面板无法正常工作。
-
ok
console.log(e.target)，检查哪个项目收到了滑动。 -
@Omar：我的面板在任何情况下都无法在 FF 中运行。在哪里写 console.log。
标签： jquery html twitter-bootstrap jquery-mobile jquery-mobile-panel