首先在一个页面里面定义两个< 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. TDirectory.GetCreationTime、TDirectory.SetCreationTime获取和设置文件夹创建时间

    使用函数: System.IOUtils.TDirectory.GetCreationTime//获取创建时间 System.IOUtils.TDirectory.SetCreationTime//设 ...

  2. iOS开发之本地化

    一.简介 * 使用本地化功能,可以轻松地将应用程序翻译成多种语言,甚至可以翻译成同一语言的多种方言 * 如果要添加本地化功能,需要为每种支持的语言创建一个子目录,称为”本地化文件夹”,通常使用.lpr ...

  3. CSS3 calc() 会计算的属性

    calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. ...

  4. 用 NSURProtocol 注入测试数据

    在之前的几篇博文中,笔者介绍过访问异步网络的单元测试方法及如何使用模拟对象来进一步控制单元测试的范围.在今天的教程中,笔者将展示另一种方法,即:通过自定义 NSURProtocol 类来获取静态测试数 ...

  5. 前端性能优化（三）——传统 JavaScript 优化的误区

    注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...

  6. 【POJ 2486】 Apple Tree (树形DP)

    Apple Tree Description Wshxzt is a lovely girl. She likes apple very much. One day HX takes her to a ...

  7. 基于Spring Boot构建的Spring MVC快速入门

    原文地址:http://tianmaying.com/tutorial/spring-mvc-quickstart 环境准备 一个称手的文本编辑器(例如Vim.Emacs.Sublime Text)或 ...

  8. 李洪强iOS开发Swift篇—03_字符串和数据类型

    李洪强iOS开发Swift篇—03_字符串和数据类型 一.字符串 字符串是String类型的数据,用双引号""包住文字内容  let website = "http:// ...

  9. android 对象传输及parcel机制

    在开发中不少要用到Activity直接传输对象,下面我们来看看,其实跟java里面差不多   自定义对象的传递:通过intent传递自定义对象的方法有两个  第一是实现Serialization接口: ...

  10. 通过 Azure 媒体服务进行高速编码

    Milan Gada Azure 媒体服务首席项目经理  关于 Azure 媒体服务,客户问的最多的一个问题是能否进行高速编码.这个问题现在已经有了肯定的答案,目前有三种不同类型的 Encodin ...