animation - jQueryMobile : page animations

Question

我的单个 HTML 文件中嵌入了 2 个页面。所以它所做的是最初它显示 PAGE1，然后如果我从右向左或从左向右滑动 PAGE2 应该显示。我的问题是如何根据我的滑动更改页面动画？比如当我从右向左滑动表单时，动画应该是页面从右向左滚动，反之亦然？

我知道页面滑动事件，但我不知道如何以编程方式更改其动画

谢谢!

Answer 1

更新的答案:

如果您正在寻找页面转换，我建议您阅读:

• http://jquerymobile.com/demos/1.0/docs/api/methods.html
• http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html

例子:

添加该属性会从右向左滑动

data-transition="slide"

添加这些属性会从左向右滑动

data-transition="slide" data-direction="reverse"

原答案如下:

实例:

• http://jsfiddle.net/yxzZf/4/

JS:

$("#listitem").swiperight(function() {
    $.mobile.changePage("#page1");
});

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <p>
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li id="listitem">Swipe Right to view Page 1</li>
            </ul>
        </p>
    </div>
</div>

<div data-role="page" id="page1"> 
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c">
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Back to the Home Page</a></li>
        </ul>

        <p>
            Yeah!<br />You Swiped Right to view Page 1
        </p>
    </div>
</div>

相关:

• Adding JQM swipe event to listview link
• Adding jquery mobile swipe event