如何重複使用此JQM功能而不是將其複製5次？

Question

我看到這個demo page，我使用JQM將其構建在我的頁面中。但是，要打開滑動面板，需要以下功能：

$(document).on("pagecreate", "#demo-page", function() { 
    $(document).on("swipeleft swiperight", "#demo-page", function(e) { 
     // We check if there is no open panel on the page because otherwise 
     // a swipe to close the left panel would also open the right panel (and v.v.). 
     // We do this by checking the data that the framework stores on the page element (panel: open). 
     if ($(".ui-page-active").jqmData("panel") !== "open") { 
      if (e.type === "swipeleft") { 
       $("#right-panel").panel("open"); 
      } else if (e.type === "swiperight") { 
       $("#left-panel").panel("open"); 
      } 
     } 
    }); 
}); 

但是我有4個其他頁面。我如何重複使用每個頁面的功能而不是複製它？

Answer 1

我推薦使用可以從任何網頁訪問的外部面板。一個外部面板應放在任何頁面之外，即應該是所有頁面的兄弟，頁容器的孩子。

<!-- external panel --> 
<div data-role="panel" id="myPanel"> 
    <!-- content --> 
</div> 

<!-- pages --> 
<div data-role="page" id="p1"> 
    <!-- content --> 
</div> 

<div data-role="page" id="p1"> 
    <!-- content --> 
</div> 

然後初始化它手動和提高其內容。

$(function() { 
    $("#myPanel").panel().enhanceWithin(); 
}); 

要添加刷卡監聽器，在pagecreate一旦.one()運行代碼。

$(document).one("pagecreate", function() { 
    $(document).on("swipeleft", function (e) { 
     if ($(".ui-page-active").jqmData("panel") !== "open") { 
      $("#myPanel").panel("open"); 
     } 
    }); 
}); 

---

但是，如果你想使用一個不同的面板爲每個頁面，那麼你需要，只要pagecreate觸發器利用event.target運行代碼。而且，要在刷卡事件被觸發的頁面中定位面板，則需要使用activePage方法。

我忘了提及pagecreate事件每頁觸發一次，因此，下面的代碼將每頁執行一次。

$(document).on("pagecreate", function (e) { 
    $(e.target).on("swipeleft", function (e) { 
     var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"); 
     if (activePage.jqmData("panel") !== "open") { 
      $("[data-role=panel]", activePage).panel("open"); 
     } 
    }); 
}); 

Answer 2

嗯，這是一個anonimouse函數，只是給它一個名字，將它保存在一個* .js文件中，並將這個文件包含在你的四個頁面中。這裏的機能的研究有一個名字：

function withName(e) { 
      // We check if there is no open panel on the page because otherwise 
      // a swipe to close the left panel would also open the right panel (and v.v.). 
      // We do this by checking the data that the framework stores on the page element (panel: open). 
      if ($(".ui-page-active").jqmData("panel") !== "open") { 
       if (e.type === "swipeleft") { 
        $("#right-panel").panel("open"); 
       } else if (e.type === "swiperight") { 
        $("#left-panel").panel("open"); 
       } 
      } 
     } 

function moreName() { 
     $(document).on("swipeleft swiperight", "#demo-page", withName); 
    } 

$(document).on("pagecreate", "#demo-page", moreName);