Question

我正在使用jQuery mobile作为我正在构建的Html5 IOS应用程序的背景。

应用简报要求滑动面板显示通知（左侧滑动）和联系信息（右侧滑动）。使用下面的代码可以正常工作，但我还需要添加嵌套滑动以获得需要左右触发器的横幅滑块 - 所以当我在'bannerArea'div上滑动时，我需要做出不同的反应，而不是其他的页。

js -

$( document ).on( "pageinit", "#demo-page", function() {
  $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
    if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
        if ( e.type === "swipeleft"  ) {
            $( "#right-panel" ).panel( "open" );
        } else if ( e.type === "swiperight" ) {
            $( "#left-panel" ).panel( "open" );
        }
    }
   });
 });

html -

<div data-role="page" id="demo-page"  data-url="demo-page">
<div data-role="panel" id="left-panel" class="main_nav" data-display="push"  data-dismissible="true" data-theme="a">
    <div class="nav_profile">
        <div class="nav_name">
            <h3>Notifications</h3>
            <p>Blah</p>
            <p>Blah</p>
        </div><!--/nav_name-->
    </div><!--/nav_profile-->
</div>
<div data-role="panel" id="right-panel" data-position="right" class="main_nav" data-display="push"  data-dismissible="true" data-theme="a">
    <div class="nav_profile">
        <div class="nav_name">
            <h3>Contact</h3>
            <p>Blah</p>
            <p>Blah</p>
        </div><!--/nav_name-->
    </div><!--/nav_profile-->
</div>
<!-- /panel -->
<div data-role="header" class="header" data-position="fixed" role="banner" >
    <h3 class="hp">Zoe<span>Personal Trainer</span></h3>
    <a href="#left-panel" data-rel="panel" data-role="button" class="menu_icon left notifPanelLink" ></a>
</div>
<div data-role="content" id="background">
    <div class=" notificationArea">
    NotifBlock
    </div>
    <div class="bannerArea">

    </div>



</div>
</div>

任何人都可以为此推荐最佳解决方案 - 我正在考虑在滑动脚本中添加一个if not'bannerArea'语句，但想知道是否有更好的解决方案？

干杯

Answer 1

这就是我实现你的'.bannerArea'解决方案的方法。

$( document ).on( "pageinit", "#demo-page", function() {
   $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
   if($(e.target).closest('div.bannerArea').length==0)
   {
    if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
        if ( e.type === "swipeleft"  ) {
            $( "#right-panel" ).panel( "open" );
        } else if ( e.type === "swiperight" ) {
            $( "#left-panel" ).panel( "open" );
    }
   }
   else {
   /** HANDLE THE BANNER SWIPE HERE**/
   }

  }
 });
});

JQuery Mobile / Phonegap Panels嵌套滑动

1 个答案: