首先在一个页面里面定义两个< 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. Android中图片的异步加载

    转: 1.  为什么要异步加载图片 下载图片比较费时,先显示文字部分,让加载图片的过程在后台,以提升用户体验 2.  SoftReference的作用 栈内存—引用 堆内存—对象 Eg: Object ...

  2. jquery解析XML(1)

    jquery解析XML文件 html代码 <!DOCTYPE html><html><head><title>解析XML</title>&l ...

  3. Mysql存储过程知识，案例--mysql存储过程基本函数

    Mysql存储过程知识,案例: create procedure delete_setting(in p_settingid integer) begin delete from setting wh ...

  4. 使用cvs或svn从sourceforge上获取开源项目的方法[转载]

    著名开源软件网站(www.sourceforge.net)上面的开源项目,大部分使用的管理工具为cvs或svn. 这两种软件的代表客户端程序是wincvs和tortoiseSVN.   1.cvs C ...

  5. Mysql 与 php动态网站开发 入门教程

    这个系列的教程由表单开始写,因为表单可以把数据库和web 之间的交互表现得很明显.提交表单 ,数据库记录注册信息. 本教程属于基础教程.大神请略过.        对于php和mysql之间的稳固性很 ...

  6. 在ADO.NET中使用参数化SQL语句访问不同数据库时的差异

    在ADO.NET中经常需要跟各种数据库打交道,在不实用存储过程的情况下,使用参数化SQL语句一定程度上可以防止SQL注入,同时对一些较难赋值的字段(如在SQL Server中Image字段,在Orac ...

  7. 在ubuntu12.0.4上搭建samba服务器以实现文件共享

    在安装之前samba服务器之前,先进行以下配置和测试. <壹> 准备工作 一.NAT联网方式 (1)硬件连接 无需网线,无需路由器 (2)虚拟机选择NAT连接方式 (3)测试网络通不通 在 ...

  8. maven的安装,maven库配置和Eclipse插件的安装

    maven的安装,maven库配置和Eclipse插件的安装 1.下载并解压maven 2.配置环境变量 3.配置maven配置文件 1.下载链接 Downloading Apache Maven 2 ...

  9. keychain 多应用共享数据

    地址:http://blog.csdn.net/jerryvon/article/details/16843065 补充: 若plist跟项目不在同一级目录下,可通过XXX/xxx.plist的方式设 ...

  10. Servlet高级应用---Servlet与缓存

    一]设置缓存文件的有效日期        重点方法:            HttpServletRequest类:                    1>String getRequest ...