Jquery Mobile转场特效之slide | 小小iPhone开发

2012

Jquery Mobile转场特效之slide

作者:小小   发布:2012-12-12 14:03   分类:jQueryMobile   阅读:1,354 次   暂无评论  
 

Jquery Mobile页面转场有诸多特效,其中slide是滑动效果,确切说是从右向左滑动,在项目中使用时,如果有从右向左滑动,那么再加上“返回”的从左向右的滑动就有更好的体验了,由于jquery mobile没有特定的从左向右滑动的关键词,下面说下这种特效的实现方式。

本来的从右向左滑动的特效的slide的写法:

<a href=”#day_report_3″ data-transition=”slide”>Next</a>

或:

$(‘#day_report_5′).bind( ‘swipeleft’, function( e ) {
$.mobile.changePage(“#day_report_1″,{transition: “slide”,changeHash: true});
e.stopImmediatePropagation();
return false;
} );

从左向右的slide特效的写法:

<a href=”#day_report_2″ data-transition=”slide” data-direction=”reverse”>Next</a>

或:

$(‘#day_report_5′).bind( ‘swiperight’, function( e ) {
$.mobile.changePage(“#day_report_4″,{transition: “slide”,reverse:”true”,changeHash: true});
e.stopImmediatePropagation();
return false;
} );

在<a> 中设置data-direction=”reverse”,在$.mobile.changePage中设置reverse:”true”,这样设置后的结果是转场特效反向,也就实现了我们需要的效果了。

本文固定链接: http://iphone.xiaoxiaostudio.net/2012/12/12/jquery-mobile%e8%bd%ac%e5%9c%ba%e7%89%b9%e6%95%88%e4%b9%8bslide/ | 小小iPhone开发

Jquery Mobile转场特效之slide | 小小iPhone开发的更多相关文章

  1. jquery mobile转场时加载js失效(转)

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...

  2. jquery mobile转场时加载js失效

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...

  3. jquery mobile 转场闪屏的解决

     jqm转场闪屏是用phonegap生成apk非常容易遇到的问题,暂时貌似还是没有完美的解决方案,网上暂时有一些方案,个人都尝试了一下发现还是改背景比较有效,总结如下: 改变默认css文件: .ui- ...

  4. Android+Jquery Mobile学习系列(4)-页面转场及参数传递

    关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...

  5. Android+Jquery Mobile学习系列(4)-页面跳转及参数传递

    关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...

  6. jQuery Mobile 连接外部连接或切换动画

    jQuery Mobile不同网页之间的跳转问题 jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery:目前支持很多种手机设备,包括IOS/Android/Bl ...

  7. jquery mobile自己定义webapp开发实例(一)——前言篇

    用jquery mobile做了一段时间的webapp开发,准备用自己的一个小demo做一个模块化的分享 点击demo演示 手机演示二维码: 此demo已经是比較老的版本号,用户体验流畅度确实还存在非 ...

  8. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 | Kayo's Melody

    最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mob ...

  9. 移动端开发:使用jQuery Mobile还是Zepto

    原:http://blog.csdn.net/liubinwyzbt/article/details/51446771 jQuery Mobile和Zepto是移动端的js库.jQuery Mobil ...

随机推荐

  1. java:字符串的“+”运算

    今天在一篇博客里,意外的看到了一段关于java中对字符串的“+”运算的处理(博客原文:http://blog.csdn.net/yirentianran/article/details/2871417 ...

  2. HDU2084:数塔(DP)

    Problem Description 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大 ...

  3. strut2服务器与android交互数据

    libs如图: web.xml: <?xml version="1.0" encoding="UTF-8"?> <web-app versio ...

  4. NYIST 914Yougth的最大化【二分搜索/Dinkelbach算法】

    转载请注明出处:http://www.cnblogs.com/KirisameMarisa/p/4187637.html 题目链接:http://acm.nyist.net/JudgeOnline/p ...

  5. K - K.Bro Sorting

    Description Matt’s friend K.Bro is an ACMer. Yesterday, K.Bro learnt an algorithm: Bubble sort. Bubb ...

  6. if else配对问题

    else语句总是与离它最近的if语句配对,所以在if语句的嵌套中一定要注意else语句与哪个if语句匹配 #include <iostream> using namespace std; ...

  7. C# 继承细节

    假定没有为类定义任何显式的构造函数,这样编译器就会为所有的类提供默认的构造函数,在后台会进行许多操作,编译器可以很好地解决层次结构中的所有问题,每个类中的每个字段都会初始化为默认值.但在添加了一个我们 ...

  8. vim 小技巧总结

    1.v+移动光标可以选中文本. 2.y可以复制已经选中的文本 3.p可以粘贴 复制一行则:yy 复制当前光标所在的位置到行尾:y$ 复制当前光标所在的位置到行首:y^ 复制三行则:3yy,即从当前光标 ...

  9. 基于visual Studio2013解决C语言竞赛题之0502最小数替换

         题目

  10. 什么是TimeTunnel

    index - Taocode 欢迎使用TimeTunnel PageOutline(1-3,,inline) 什么是TimeTunnel !TimeTunnel(简称TT)是一个基于thrift通讯 ...