首先在一个页面里面定义两个< 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左右滑动效果的更多相关文章

  1. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

  2. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  3. 两个完整的jquery slide多方面滑动效果实例

    实例1,需要引用jquery-ui.js <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  4. 8.jQuery之上下滑动效果

    上下滑动:slideDown   slideUp  slideToggle <style> div { width: 150px; height: 300px; background-co ...

  5. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

  6. 第十三篇、jQuery Mobile

    API-->搜索data 0.page data-transition="slide" // 页面切换效果 data-position="fixed" / ...

  7. 皓轩的jquery mobile之路（二）

    jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 编写代码要注意最外层div需要添加data-role="page" ,标题需要添加dat ...

  8. Jquery Mobile笔记之一

    jQuery Mobile 在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中: 从 CDN 中加载 jQuery Mobile (推荐) ...

  9. jQuery Mobile 所有data-*选项，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile事件全解 jQuery Mobile 所有class选项 jQuery Mobile 所有data-*选项 jQuery Mobile 所 ...

随机推荐

  1. JavaScript学习总结【12】、JS AJAX应用

    1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...

  2. ionic移动开发入门

    学习资料:http://www.ionic.wang http://www.ionicframework.com/

  3. Python的简介以及安装和第一个程序以及用法

    Python的简介: 1.Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.自从20世纪90年代初Python语言诞生至今,它逐渐被广泛应用于处理系统管理任务和Web编程.Pytho ...

  4. makefile debug

    1. 使用warning指令 warning 是个不错的命令,可以打印出消息,来判断makefile执行的流程 2.使用ifeq ifneq 当makefile被多次调用到的时候,如果都输出warni ...

  5. keybd_event函数用法

    转自不用winio,直接达到驱动级模拟键盘效果的keybd_event函数用法 键盘模拟技术是在编写游戏外挂时经常使用的技术.但是由于很多游戏采用了directinput的方式,使得发送的一般键盘消息 ...

  6. 简析LIVE555中的延时队列

    http://www.cnblogs.com/nightwatcher/archive/2011/04/10/2011158.html 最近在看LIVE555的源码,感觉其中的延时队列写的不错,于是就 ...

  7. ANDROID_MARS学习笔记_S04_005_用sing-post向腾讯微博发一条信息

    一.代码流程 1.组织好sign-post需要的token,secrect 2.组织好发微博需要的信息 3.用sign-post进行签名 4.把签名结果从header中拿出来,转成entity,用ht ...

  8. 心愿：做一个精简版MFC

    我觉得自己有能力看懂MFC的C++代码和总体流程,但是由于MFC混杂了太多的东西,比如OLE等等不必要的东西,又做了无数的ASSERT判断,影响整体流程的理解.因此我要做一个精简版的MFC,而且能用它 ...

  9. windows下安装php真正的多线程扩展pthreads教程

    扩展地址:http://docs.php.net/manual/zh/book.pthreads.php 注意事项php5.3或以上,且为线程安全版本.apache和php使用的编译器必须一致.通过p ...

  10. 用C++试着完成Python简明教程后面的练习

    试图存取文件的部分无法完成.代码已提交到github.