功能swipeleft / swiperight

Question

的JavaScript

$(document).on("swiperight", function(event, ui){
    $("#mypanel, #mypanel2, #mypanel3, #mypanel4, #mypanel5").panel("open");
});

$(document).on("swipeleft", function(event, ui){
    $("#mypanel, #mypanel2, #mypanel3, #mypanel4, #mypanel5").panel("close");
});

我是jQuery和javascript的新手。我试图在我的面板上做swipeleft / swiperight。 事情是滑动事件仅适用于第一页/面板。其他页面上的面板没有响应。

这里是JS fiddle。谁能帮助我理解为什么这不能按预期工作？

Answer 1

您有两种选择：

1. 使用外部面板（所有页面都有一个面板），可以从任意页面访问，更少的HTML标签和更快的页面处理。

   • HTML

     <!-- External panel -->
     <div data-role="panel" id="external">
     </div>  
     
     <!-- Pages -->
     <div data-role="page" id="page1">
     </div>
     
     <div data-role="page" id="page2">
     </div>
     

   • JS：初始化外部面板并添加swipe侦听器。

     $(function () {
       $("[data-role=panel]").enhanceWithin().panel();
     });
     
     $(document).on("swiperight", function (event, ui) {
       $("#external").panel("open");
     });
     

2. 如果您决定为每个页面使用单独的面板，请打开当前/活动页面面板。

   $(document).on("swiperight", function (event, ui) {
     $.mobile.pageContainer.pagecontainer("getActivePage").find("[data-role=panel]").panel("open");
   });
   

  

<强> Demo