jquery - JQuery Mobile / Phonegap パネルのネストされたスワイプ

Question

私が構築している Html5 IOS アプリの背景として jQuery モバイルを使用しています。

アプリの概要では、通知 (左スワイプ) と連絡先情報 (右スワイプ) を表示するスライド パネルが必要です。これは以下のコードで問題なく動作しますが、左と右のトリガーも必要とするバナー スライダーのネストされたスワイプを追加する必要もあります。ページ。

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' ステートメントを追加することを考えていますが、より良い解決策があるかどうか疑問に思っていますか?

乾杯