首先在一个页面里面定义两个< 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. NPOI2.0

    今天在使用NPOI2.0读取上传excel文件(excel2010)时,报了一个很奇怪的错误:无效的 URI: 未能分析主机名. 在网上查找了下找到的出错情况跟这个完全不着边际,没有办法只有自己去测试 ...

  2. onmouseleave与onmouseout区别

    1.onmouseleave.onmouseenter,鼠标进入到指定元素区域内触发事件,不支持冒泡,不包含子元素的区域. 2.onmouseout.onmouseover.鼠标进入指定元素触发事件, ...

  3. JavaScript语言用10张图

    JavaScript 语言基础知识点总结,用图片树形结构说明.包括Windows对象.JavaScriptDOM基本操作.JavaScript变量.JavaScript数据类型.JavaScript运 ...

  4. django 自定义标签

    Context和RequestContext都能被Template 进行render RequestContext类接受reqest,字典,processors 实例化.并被TEMPLATE_CONT ...

  5. zzuli oj 1165 实数的小数部分（指针专题）

    Description 读入一个实数,输出该实数的小数部分,小数部分若多余的末尾0,请去掉.如输入111111.12345678912345678900  则输出0.12345678912345678 ...

  6. Waterfall———瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。

    瀑布流布局插件, 类似于 Pinterest.花瓣.发现啦. En 中文 文档 下载 下载waterfall插件最新版本. 使用 html: <div id="container&qu ...

  7. Word图片显示不完整

    选中图片和上下文字,段落里选择单倍行距,其他行距不行.

  8. 【网络流24题】 No.2 太空飞行计划问题 （最大闭合权图 最大流 ）

    原题:         W教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合 E={E1,E2,...,Em},和进行这些实验需 ...

  9. POJ3984 迷宫问题

    典型BFS. #include <iostream> #include <memory.h> #include <queue> #include <map&g ...

  10. UCS-2和UTF8的四个新知识点和新的疑问

    最初的unicode编码是固定长度的,16位,也就是2两个字节代表一个字符,这样一共可以表示65536个字符.显然,这样要表示各种语言中所有的字符是远远不够的.Unicode4.0规范考虑到了这种情况 ...