JQuery Mobile左右滑动效果

最新推荐文章于 2015-03-26 12:39:00 发布

原创最新推荐文章于 2015-03-26 12:39:00 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Html5&&JQM 专栏收录该内容

13 篇文章

订阅专栏

首先，页面里有两个<div data-role="page">，捡重点的写是，省掉其中的header和footer,这样：

 
    01//第一页面

<div data-role="page" id="index"> 

<div data-role="content"> 

     <ul data-role="listview" id="circle-news-list"> 

    <!-- 第一个列表 --> 

     </ul>            

</div> 

</div> 

    09//第二页面

<div data-role="page" id="class-page"> 

<div data-role="content"> 

     <ul data-role="listview" id="class-news-list"> 

    <!-- 第二个列表 --> 

     </ul>            

</div> 

</div>

接下来通过jquery mobile 中的swipe事件还执行左右滑动效果：

 
    01<script>

$(function(){ 

    $("#circle-news-list").bind("swipeleft",function(){ 

        $.mobile.changePage("#class-page"); 

    }); 

    $("#class-news-list").bind("swiperight",function(){ 

        $.mobile.changePage("#index", {transition:"slide",reverse:true}, true, true); 

    }); 

    09});

    10</script>