Question

我正在尝试使用jQuery加载动态页面，遵循此example。

（编辑）：更新了代码以提供更好的上下文视图

这是一个代码示例

<div data-role="page" id="pageSample">
    <div data-role="header">title</div>
    <div data-role="content">
        <a href="#home" data-role="button" data-transition="slide" data-direction='reverse'>Home</a>
    </div>
    <div data-role="footer">Footer</div>
</div>

$(document).bind( "pagebeforechange", function( e, data ) {
    // Generate dynamic content of targeted pages...
    $.mobile.changePage($(page), {
        transition:"slide",
        dataUrl:url,
        reverse:reverse
    });
});

可以动态生成或不生成后退按钮（例如此片段）。在这两种情况下，它都不起作用，因为changePage是通过pagebeforechange触发的。因此，我在reverse选项中插入了changePage()变量。

我无法找到检索所点击项目的数据方向值的方法。我在changePage()：

之前尝试过这个

reverse = false;
$('a[data-direction="reverse"]').on("click", function(){
    reverse = true;
});

但reverse中的changePage()值未更新。我想这两个代码同步运行。有没有办法更新reverse中的changePage()值？

Answer 1

最终更新

根据我们的讨论和您的示例http://jsfiddle.net/Iris/UZBhx/21/

更改此

$('a').on("click", function()

到

$(document).on("click", 'a', function()

另一次更新

将$.mobile.changePage绑定到pagebeforechange会触发所有代码两次。因此，当命令第一次执行时，您将丢失reverse的值或忽略它。

尝试将其绑定到pagebeforehide，如下所示。

$(document).bind( 'pagebeforehide', '[data-role="page"]#PageId', function( e, data ) {

// Generate dynamic content of targeted pages...

  $.mobile.changePage($(page), {
   transition:"slide",
   dataUrl:url,
   reverse:reverse
  });
});

<强>更新

要对特定按钮使用反向效果，可以使用此方法。

首先，为具有反向效果的按钮指定一个类，例如ui-reverse并添加以下脚本。

$(document).on('click', '[data-role='button'].ui-reverse', function() {
 $.mobile.changePage( url, {
  transition:"slide",
  reverse: true, 
  dataUrl:url
 });  
});

“返回”按钮链接 - Jquery Mobile

data-direction="reverse"

只是简单地运行将在该页面更改上运行的转换的向后版本，而data-rel =“back”使链接在功能上等同于浏览器的后退按钮，并且所有标准后退按钮逻辑都适用。 / p>

data-rel="back"

这将模仿后退按钮，返回一个历史记录条目并忽略锚点的默认href。

将data-direction="reverse"添加到data-rel="back"的链接不会反转反向页面转换并生成转换的“正常”版本。

在您的情况下，您想要反向转换，请使用以下代码。

$.mobile.changePage($(page), {
 transition:"slide",
 reverse: true, // this will reverse the affect of the transition used in the page.
 dataUrl:url
});

使用动态加载页面的数据方向

1 个答案: