Question

我正在使用这个jquery.mobile示例来使用滑动来导航页面。

现在我不想在整个页面上滑动。我想将它仅绑定到div元素。

我的页面上有一个div元素

<div id="divSWIPE"></div>

我查看了示例的源代码，我想我找到了处理滑动事件的部分。

// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
    var prev = $( this ).jqmData( "prev" );

    if ( prev && ( event.target === $( this )[ 0 ] ) ) {
        navprev( prev );
    }
});

我试图修改这个，但我不能只在div元素上工作。我试过这个

$( "#divSWIPE" ).on( "swiperight", ".ui-page", function( event ) {

和这个

$( document ).on( "swiperight", "divSWIPE", function( event ) {

但这不起作用。

如何将其绑定到我的div元素？

Answer 1

在pagecreate上攻击滑动侦听器。下面的代码将检查当前页面之前的DOM中是否有页面。或者从页面div data-prev中的自定义属性中检索值。

$(document).on("pagecreate", function (e) {
  var page = e.target;

  $("#divSwipe", page).on("swiperight", function () {

    var prev = $(this).closest(".ui-page").prev("[data-role=page]");

    /* or read custom attribute */

    var prev = $(this).closest(".ui-page").data("prev");

    if ( prev.length > 0 || typeof prev != "undefined" ) {

      /* navigate or do something else */
      $.mobile.pageContainer.pagecontainer("change", prev);

    }

  });
});

jquery.mobile将页面导航限制为div元素

1 个答案: