JQuery Mobile/Phonegap面板嵌套刷卡

Question

我正在使用jQuery手機作爲我正在構建的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> 

誰能推薦我們的最佳解決方案 - 我想到了刷腳本，但不知道內添加如果不是 '.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**/ 
    } 

    } 
}); 
});