Jquery Mobile左右滑动效果

首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点，就没有写出footer和header。定义的页面如下：

 

<body>	
<!-- 第一个页面 -->
	<div data-role="page" id="index">

		<div data-role="content">
			<ul data-role="listview" id="listview1">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>

	</div>
	<!-- 第二个页面 -->
	<div data-role="page" id="class-page">

		<div data-role="content">
			<ul data-role="listview" id="listview2">
				<li>4</li>
				<li>5</li>
				<li>6</li>
			</ul>
		</div>

	</div>
</body>



 

 

 

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

<script>
	$(function() {

		$("#listview1").bind("swipeleft", function() {

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

		});

		$("#listview2").bind("swiperight", function() {

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

		});

	});
</script>


这里，从左往右比较容易，默认的slide就可以了，从右往左是关键，默认的切换效果还是会从左往右，所以要加上

 

 

reverse:true,这样就可以实现左右切换了~

参考文章：http://my.oschina.net/geomen/blog/75387

posted on 2013-10-08 22:42  you Richer  阅读(816)  评论(0)  编辑  收藏  举报