有jQuery Mobile的的相当于Android的ViewPager？ [英] Is there jQuery Mobile's equivalent to the Android's ViewPager?

问题描述

我要创建使用jQuery Mobile的水平刷卡效果。做研究的一点点后，我发现的 ViewPager ，通常发现在Android Market中的应用程序详细信息页面，我想要做什么。在页面中指定的作者描述它与code在Android的，但我想知道是否有在JQM等效插件或功能。

I want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.

推荐答案

我喜欢 SwipeJS ，它是轻量级的，我喜欢它使用一到一个滑动因子（当横跨元件滑动手指时，它移动以同样的速度）。

I like SwipeJS, it's lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).

另外也 iScroll 4 的作品pretty的好（这似乎是比较难设置比SwipeJS）。

There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).

但是，您可以利用内置的刷卡jQuery中移动事件。您可以绑定到 swipeleft 或 swiperight 为数据角色事件=页面 元素（S）和导航用户根据当前页面上的正确的页面：

You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:

$(document).delegate('#page-two', 'swipeleft', function () {
    //next page
    $.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
    //prev page
    $.mobile.changePage($('#page-one'), { reverse : true });
});

下面是一个演示： http://jsfiddle.net/fFGvD/

注意 {逆转：真} 对象传递的选项对象的 changePage（）函数，所以动画将反向播放。

Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.

这篇关于有jQuery Mobile的的相当于Android的ViewPager？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！