我看到了这个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 个其他页面。如何为每个页面重用该函数而不是复制它?
最佳答案
我建议使用可以从任何页面访问的外部面板。 外部面板应该放置在任何页面之外,即应该是所有页面的兄弟,页面容器的 child em>.
<!-- 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();
});
要添加滑动 监听器,请运行一次代码.one()
在 pagecreate
.
$(document).one("pagecreate", function () {
$(document).on("swipeleft", function (e) {
if ($(".ui-page-active").jqmData("panel") !== "open") {
$("#myPanel").panel("open");
}
});
});
但是,如果您想为每个页面使用不同的面板,那么您需要在任何时候运行代码 pagecreate
利用 event.target
触发.此外,要在触发swipe 事件的页面中定位面板,您需要使用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");
}
});
});
关于javascript - 我怎样才能重用这个 JQM 函数而不是复制它 5 次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26401653/