如何在 jQuery Mobile 中更改 Ajax 表单转换？答案

【问题标题】：How to change Ajax forms transition in jQuery Mobile?如何在 jQuery Mobile 中更改 Ajax 表单转换？
【发布时间】：2011-07-04 05:33:55
【问题描述】：

有没有办法在 jQuery mobile 中改变 Ajax 表单的转换？现在，当我提交表单时，如果验证（服务器端）成功，它会滑到«成功页面»，没关系，但如果表单无效，它会滑到相同的表单，但字段错误......有点奇怪 :) 我想让它褪色……

我知道我可以覆盖 ajax 提交，但更好的是……

* 编辑 *

我发现我们可以覆盖默认转换类型，所以我想我可以将默认转换设置为“淡入淡出”并指定其他链接的转换，但它不起作用，这是代码，不知道怎么了……

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="/assets/js/mobile/custom.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

在 custom.js

$(document).live("mobileinit", function(){
    $.mobile.defaultTransition: 'fade'
});

没有错误，也没有 404。

【问题讨论】：

标签： jquery ajax forms mobile transition

【解决方案1】：

假设您可以将data-transition 属性添加到表单标签，如下所示：

<form method="post" data-transition="fade" action="/awesomeness">
  ...

但我还没有看到它有效地工作。

已修复

好吧，我已经在 github 上提交了一个修复请求，但你需要做的是更改 jQuery Mobile 源代码：

line 2159 of the alpha-3 release:
    $.mobile.changePage({
            url: url,
            type: type,
            data: $(this).serialize()
        },
        $(this).attr('data-transition'),  // this used to be *undefined* just like the next parameter
        undefined,
        true
    );

那么你可以在你的表单标签中使用data-transition="fade"。

【讨论】：

我想我已经尝试过了，但没有成功……现在，我删除了 ajax 表单提交，虽然不流畅但仍然更好。无论如何谢谢！

【解决方案2】：

我只是使用 data-transition="none" ，它似乎工作。也许这是已修复的问题。我正在使用 1.0a4.1

【讨论】：