jquery mobile mobile返回带有过渡？答案

【问题标题】：jquery mobile mobile back with transition?jquery mobile mobile返回带有过渡？
【发布时间】：2013-06-10 10:02:27
【问题描述】：

我正在使用backbone.js 和jquery mobile 构建一个网络应用程序。我想为所有类名的“后退”按钮添加反向幻灯片效果。

代码如下所示，

$('.ico_back').live('click', function(event) {
 $.mobile.back();
 return false;
});

有谁知道如何为$.mobile.back() 函数添加反向效果？

（这是一个单页应用程序，所以我不能用传统的 JQM 方式来做到这一点：比如添加一个简单的data-transition="slide"）

【问题讨论】：

将.ico-back 元素设置在a 标记内，并为其添加data-rel= back 属性。您也可以使用data-transition="slide" 属性向其添加过渡
我使用backbone.js在不同的url之间改变视图，我设置了$.mobile.ajaxEnabled = false; $.mobile.linkBindingEnabled = 假；所以我只能使用 JQM 函数来进行页面更改
还将.live替换为.on('click', '.ico-back', function

标签： javascript jquery jquery-mobile backbone.js

【解决方案1】：

使用下面的代码动态切换到上一页。

Demo

$(document).on('click', '.ico-back', function () {
 var previous = $.mobile.activePage.prev('[data-role=page]');
 $.mobile.changePage(previous, { 
  transition: 'slide',
  reverse: true });
});

编辑：根据提供的 repo 中的代码，对以下代码块进行以下更改。

if (this.firstPage) {
 transition = 'slide';
 this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash:false, transition: transition, reverse:true });

【讨论】：

感谢帮助，这个项目中没有多个页面，所以上面的代码会导致一些错误，我正在使用这个github repo的代码，你可以检查它github.com/ccoenraets/backbone-jquerymobile/blob/master/js/…跨度>
TypeError: b.data(...) 未定义
在该代码中将 transition = 'none'; 替换为 transition = 'slide'; 并添加 reverse: true

【解决方案2】：

在每个具有.ico_back 类的元素中，它添加了data-rel 和data-transition 属性。这样您就不必查找上一页或在代码中添加额外的逻辑。 jQM 为您管理后页转换。

$(document)
     .on("pageinit", "#page-id", function () {
         $('.ico_back')
             .each(function (index) {
                 $(this)
                     .attr("data-rel", "back");
                 $(this)
                     .attr("data-transition", "slide");
          });
});

我希望这会有所帮助。

【讨论】：

【解决方案3】：

根据 Tolis Emmanouilidis 的回答，您可以 wrap 您的 ico_back 类与 a

$(document).on("pageinit", "#page-id", function () {
    $('.ico_back').wrap($('<a/>', { "data-rel":"back", "data-transition" : "slide" }));
});

注意：这将适用于当且仅当ico_back 不是锚标记。

【讨论】：

【解决方案4】：

您甚至可以在单击按钮时使用history.back()

【讨论】：