1

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

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

这是一个代码示例

<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()？

4

1 回答 1

2

最终更新

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

改变这个

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

至

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

另一个更新

绑定$.mobile.changePagetopagebeforechange会触发所有代码两次。因此，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" 使链接在功能上等同于浏览器的后退按钮，并且所有标准后退按钮逻辑都适用。

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
});

在此处阅读更多相关信息。

于 2013-03-12T18:02:13.833 回答