Question

根据jquerymobile page transitions docs，只有最后一个版本的android支持翻转效果，我该如何制作以下按钮：

<a href="#ngame" data-role="button" data-transition="flip" data-rel="dialog">New game</a>

仅在android 2.3.4+中使用'flip'效果，在先前版本中使用'fade'效果？

如果有帮助，我在我的项目中使用phonegap。

谢谢！

Answer 1

第一步是从phonegap API（http://docs.phonegap.com/phonegap_device_device.md.html#device.version）获取设备版本。

第二步是将其解析为整数或浮点数，并用它来决定是否改变dom：

var android_version = parseFloat(device.version);
if (android_version < 2.3) {
    $.each($('[data-transition="flip"]'), function (index, value) {
        $(value).attr('data-transition', 'fade');
    });
}

您需要在deviceready事件触发后运行此操作，因为device.version变量在此之前不会就绪。此外，翻转效果将适用于早期版本的Android操作系统，它只是看起来很笨重，因为它只是旋转页面，就像它正在做一个车轮而不是三维翻转。

- ＆GT;注意：您还可以通过检查navigator.userAgent字符串来获取Web应用程序中的Android操作系统版本号。我从另一个Stackoverflow问题中找到了下面的正则表达式：Get Android OS version from user-agent

与[;(\s]Android (\d+(?:\.\d+)+)[;)]字符串匹配的

navigator.userAgent为我提供了以下输出：

Android 2.3.3;,2.3.3

Answer 2

我想知道Jasper或Nelson是否真的尝试了Jasper的解决方案。我今天遇到了同样的问题而且我还有它，因为我遇到了这个基本问题：

您只能在mobileinit事件中动态设置数据转换属性，因为（看起来像）jQueryMobile打开了您的所有页面后，您可以更改数据转换属性，但它赢了没有任何效果。
设置属性只有在加载所有元素后才有意义，因此您需要使用$（document）.ready（）进行绑定，但此事件会在mobileinit之后触发。

因此，有了这两个问题，除了入侵jQueryMobile代码之外，似乎没有其他可能的解决方案。或者我错过了什么？

如何根据Android版本更改过渡效果？

2 个答案: