首先,页面里有两个<div data-role="page">,捡重点的写是,省掉其中的header和footer,这样:
02 |
< div data-role = "page" id = "index" >
|
03 |
< div data-role = "content" >
|
04 |
< ul data-role = "listview" id = "circle-news-list" >
|
10 |
< div data-role = "page" id = "class-page" >
|
11 |
< div data-role = "content" >
|
12 |
< ul data-role = "listview" id = "class-news-list" >
|
接下来通过jquery mobile 中的swipe事件还执行左右滑动效果:
03 |
$( "#circle-news-list" ).bind( "swipeleft" , function (){
|
04 |
$.mobile.changePage( "#class-page" );
|
06 |
$( "#class-news-list" ).bind( "swiperight" , function (){
|
07 |
$.mobile.changePage( "#index" , {transition: "slide" ,reverse: true }, true , true );
|
这里,从左往右比较容易,默认的slide就可以了,从右往左是关键,默认的切换效果还是会从左往右,所以要加上
reverse:true,这样就可以实现左右切换了~
来自:http://designicu.com/jquery-mobile-swipe/
分享到:
相关推荐
jquery mobile左右滑动效果今天给大家分享了
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与...
用jquery 屏幕上方滑动层的效果。 还可以展开收回。 说明演示地址:http://blog.csdn.net/lzy_1515/archive/2010/06/24/5690863.aspx
本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下: jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会...
使用的jquery_mobile插件,引入1.4.5的插件,CSS表和jquery库即可,除了ID,CLASS命名可能会和你项目重复,改成单独即可,其他应该没有重复的,因为本脚本使用计时器写的,加入了方法判定,在执行一个方法的时候,...
jQuery苹果系统向左滑动删除特效是一款基于jquery.mobile实现的仿苹果手机短信删除功能特效。
7.14 滑动效果的背景图片 7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停...
jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。...
jQuery苹果系统向左滑动删除特效是一款基于jquery.mobile实现的仿苹果手机短信删除功能特效。
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、...jQuery Mobile (http://jquerymobile.com/download/) $("#carousel-generic
左右联动图文版jquery.mobile仿美团外卖菜单,可以左右联动,项目中需要,又没有找到参考,就自己写了一个。点击左侧的文字大类,右侧的图片列表会对应切换,比较有趣的菜单,美团网站的菜单。
基于swiper实现的移动端上下滑动选择
slideout是一款非常实用的适合移动手机使用的隐藏滑动侧边栏js插件。它没有任何依赖,代码简洁,压缩后的代码只有2KB大小。它使用CSS3 transforms 和 transitions来制作侧边栏的滑动效果。
由于我们是在做一个跨平台的APP,里面部分界面其实就是WebView加载的网页,因此需要使用网页实现这样的效果:往左滑动时,显示删除按钮,再往右滑,隐藏删除按钮。 成品示例图 额,先上图吧。下面分别是在PC浏览器里...
Mobiscroll是一款jQuery Mobile开发中日期插件,时间弹出框 ,附带例子效果比较好,还有详细使用方法,有需要的赶快下载吧
因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将canvas转为图片就可以很容易实现滑动效果,但是都不支持,最后只能是做一个canvas,需要时显示,不需要时...