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



你可能感兴趣的:(JQuery Mobile)