animation之jQueryMobile : page animations

lyhabc 阅读：19 2024-11-24 20:56:43 评论：0

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

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

谢谢!

请您参考如下方法:

更新的答案:

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

例子:

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

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>