1

我正在使用 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' 语句，但想知道是否有更好的解决方案？

干杯

4

1 回答 1

2

如果不是“.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**/
   }

  }
 });
});
于 2013-08-05T19:05:25.007 回答