首先在一个页面里面定义两个< 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. sqlserver字符串转日期

    declare   @str   varchar(15)     declare   @dt   datetime     select   @str='2005-8-26'     set   @d ...

  2. ubuntu 下安装 apache php mysql

    ubuntu 安装 apache+php+mysql1.打开终端,输入“sudo apt-get install apache2”,回车;(安装apache2.0或2.x新版本,系统会自动查找新的版本 ...

  3. Codeforces Round #336 (Div. 2) D. Zuma

    Codeforces Round #336 (Div. 2) D. Zuma 题意:输入一个字符串:每次消去一个回文串,问最少消去的次数为多少? 思路:一般对于可以从中间操作的,一般看成是从头开始(因 ...

  4. C语言-06复杂数据类型-01数组

    01-数组 #include <stdio.h> int main() { // 使用注意 // 都是正确写法 //int ages[5] = {10 , 11, 12, 67, 56}; ...

  5. STM32库函数实现方法

    一.概述 1.调用STM32库函数配置与直接配置寄存器 ① 直接配置寄存器 使用过51单片机的朋友都知道为了将IO口配置成某种特殊功能或者配置中断控制,我们先将需要如下步骤: 根据需要配置功能计算值- ...

  6. 50个实用的jQuery代码段让你成为更好的Web前端工程师

    本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...

  7. python代码优化技巧

    转自:http://www.douban.com/group/topic/31478102/ 这个资料库还有些不错的好文章: http://www.ibm.com/developerworks/cn/ ...

  8. CISCO2691的OSPF点对点密文测评测试

    都差不多,粘一个文件就能说明问题了. Router#show run Building configuration... Current configuration : bytes ! version ...

  9. eMMC尺寸

    eMMC Physical Specifications主要有四种结构,pin角定义及功能上基本一致,主要是看应用平台的需求: AA:12mm*16mm 169Pin  AB:12mm*18mm 16 ...

  10. Android 自定义组件随着手指自动画圆

    首先自定义一个View子类: package com.example.androidtest0.myView; import android.content.Context; import andro ...