首先在一个页面里面定义两个< 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 单行向上滚动文字

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  2. web前端必须掌握的localStorage

    先自我介绍一下,本人男,27岁,单身,web前端程序员一枚,长期潜伏在幕后,只学不教(貔貅么?),其实主要是工作太忙了,每天忙到11点左右,没有时间写东西,洗洗就睡了.最近赶巧,后端那边出技术瓶颈了, ...

  3. 『奇葩问题集锦』Malformed lock file found: /var/cache/dnf/metadata_lock.pid.

    Malformed lock file found: /var/cache/dnf/metadata_lock.pid.Ensure no other dnf process is running a ...

  4. 采用python获得并修改文件编码（原创）

    windows和linux采用了不同的编码,这让很多人伤透了脑经,这里我采用了Python的chardet库获得代码的编码,然后修改编码. 1.首先需要安装chardet库,有很多方式,我才用的是比较 ...

  5. php 魔术方法

    PHP5.0后,php面向对象提成更多方法,使得php更加的强大!! 一些在PHP叫魔术方法的函数,在这里介绍一下:其实在一般的应用中,我们都需要用到他们!! 1.__construct() 当实例化 ...

  6. yii 使用renderPartial调用另外一个控制器的视图

    以下由我们在信易网络公司开发项目的时候终结出的一些经验 我们可以使用renderPartial访问存储在不同控制器的视图文件夹中的部分视图文件. 在Yii1.1.3中,我们使用双斜线“//”,程序就会 ...

  7. php分页笔记

    在做留言板的时候,用到了分页,所以写了这个分页笔记   既然已经开始写分页了,肯定掌握了了php的一些知识以及mysql的基本操作   在做分页的时候,我也遇到了很多问题,但是大家不要怕,无论什么问题 ...

  8. 网络ip

    国际规定:把所有的IP地址划分为 A,B,C,D,E A类地址:范围从0-127,0是保留的并且表示所有IP地址,而127也是保留的地址,并且是用于测试环回用的.因此 A类地址的范围其实是从1-126 ...

  9. Ubuntu15.10 编译VLC Android（安卓）过程记录

    持续更新中... 最后一次修改于 2016-03-20 15:33:45 1.必要库的安装 除基本编译环境(gcc.g++等外),需要额外安装如下的库(用于下载必要的依赖文件) (1)JDK 推荐安装 ...

  10. PHP、JSP、.NET各自的真正优势是什么

    PHP的优势在于, 跨平台, 极易部署, 易维护, 为Web而生, 开源社区强大, 文档丰富.至于说3足鼎立, 谈不上, 全球前100万的sites中, 70%是PHP. JSP和Asp..net 也 ...