首先在一个页面里面定义两个< 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. js截取小数点后几位的写法

    截取小数点后几位的方法有很多,下面为大家介绍下使用js是如何实现的 如果${showInfo.tt}的值为20,要要它除以10以后精确到小数点后2位,那么js代码中可作如下写法:  复制代码 代码如下 ...

  2. DOS命令中出现空格问题

    1.DOS命令中路径出现空格时如何处理? 在DOS命令中,如果路径中出现空格,可能为报错:如参数错误 如:  xcopy C:\ABC CD\txt.txt C:\ ,   由于路径中包含空格,执行后 ...

  3. Inspiron 14 7000 系列 (7447) 游匣14 拆机图

    Inspiron 14 7000 系列 (7447)   游匣14 拆机图   游匣配置不多说,i5起步,标配4G GTX850M显卡,这么霸道的配置给我玩扫雷肯定不卡.配置高功耗就大,不过游匣的散热 ...

  4. delphi xe5 android 开发数据访问手机端(二)

    界面就这样吧,继续...,先启动咱们上几片文章建立的手机服务端 导入webservices单元,file->new->other->webservices->选择 wsdlim ...

  5. IIS tomcat共用80端口解决一个IP多个域名：使用Nginx反向代理方式使两者兼容

    环境: windows server 2003,IIS6服务器,Tomcat7服务器 域名有几个: 以下是使用IIS的域名: http://www.formuch.com/ http://www.fo ...

  6. Android代码中使用Ping命令

    项目中需要搜索同一WIFI局域网中的设备并进行通信,暂时想到的办法是得到局域网网段的地址,因为同一局域网中的IP地址前三位是相同的,而第四位的范围从0~250,所以对第四位进行遍历搜索,能ping通的 ...

  7. python-os.walk目录递归

    递归删除文件或目录: 递归,os.walk 删除目录,shutil.rmtree # -*- coding: UTF-8 -*- import os.path,sys,shutil path = 'H ...

  8. Android 写文件到手机

    1)// 在手机中创建文件 FileOutputStream phone_outStream =this.openFileOutput("1.txt", Context.MODE_ ...

  9. 【Dog】

  10. 牛刀小试、用SharePoint 实现请假管理功能

    转:http://www.cr173.com/html/15518_1.html "请假管理"应用,应该算是 SharePoint 的"Hello World!" ...