jquerymobile:页面动画

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>

有关:

• 将JQM滑动事件添加到listview链接
• 添加jquery移动滑动事件