解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题
2014-04-04 17:15
441 查看
[align=left] 在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真正fixed,如果想将header和footer真正固定住,还是很麻烦的。起初是想通过监听body的click事件,覆盖jquerymobile默认的click让header和footer能够真正固定下来,不会因为点击body而出现隐藏和出现的问题,但是设想是美好的,结果是残酷的,我在电脑的chrome浏览器上能够正常的取消jqm的默认单击隐藏header和footer的事件,可是一放到手机上就发现完全不是那么回事,通过e.preventDefault(),return false ,e.stopPropgation()等都不能阻止jqm的默认事件的触发。时间紧急,我就只能变通了,通过观察单击时候header和footer的样式区别来发现蛛丝马迹,最后发现是这些样式来实现了header和footer的渐入渐出,通过禁用其过度效果来阻止header的显示和隐藏,最终达到效果,代码如下:[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] [/align]
[align=left]/*Solve Jquery mobile header show and hide when click the long body*/[/align]
[align=left].in {[/align]
[align=left] /*-webkit-animation-timing-function: ease-out;[/align]
[align=left] -webkit-animation-duration: 350ms;[/align]
[align=left] -moz-animation-timing-function: ease-out;[/align]
[align=left] -moz-animation-duration: 350ms;[/align]
[align=left] animation-timing-function: ease-out;[/align]
[align=left] animation-duration: 350ms;*/[/align]
[align=left] -webkit-animation-timing-function: none;[/align]
[align=left] -webkit-animation-duration: 0;[/align]
[align=left] -moz-animation-timing-function: none;[/align]
[align=left] -moz-animation-duration: 0;[/align]
[align=left] animation-timing-function: ease-out;[/align]
[align=left] animation-duration: 0;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].out {[/align]
[align=left] -webkit-animation-timing-function: ease-in;[/align]
[align=left] -webkit-animation-duration: 0;[/align]
[align=left] -moz-animation-timing-function: ease-in;[/align]
[align=left] -moz-animation-duration: 0;[/align]
[align=left] animation-timing-function: ease-in;[/align]
[align=left] animation-duration: 0;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] [/align]
[align=left] [/align]
[align=left].slidedown.in,.slideup.in {[/align]
[align=left] /*-webkit-transform: translateY(0);[/align]
[align=left] -webkit-animation-name: slideinfromtop;[/align]
[align=left] -webkit-animation-duration: 250ms;[/align]
[align=left] -moz-transform: translateY(0);[/align]
[align=left] -moz-animation-name: slideinfromtop;[/align]
[align=left] -moz-animation-duration: 250ms;*/[/align]
[align=left] -webkit-transform: none;[/align]
[align=left] -webkit-animation-name: none;[/align]
[align=left] -webkit-animation-duration: 0ms;[/align]
[align=left] -moz-transform: none;[/align]
[align=left] -moz-animation-name: none;[/align]
[align=left] -moz-animation-duration: 0ms;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left] [/align]
[align=left].slidedown.out,.slideup.out {[/align]
[align=left] /*-webkit-animation-name: fadeout;[/align]
[align=left] -webkit-animation-duration: 100ms;[/align]
[align=left] -moz-animation-name: fadeout;[/align]
[align=left] -moz-animation-duration: 100ms;[/align]
[align=left] animation-name: fadeout;[/align]
[align=left] animation-duration: 100ms;*/[/align]
[align=left] -webkit-animation-name: none;[/align]
[align=left] -webkit-animation-duration: 0ms;[/align]
[align=left] -moz-animation-name: none;[/align]
[align=left] -moz-animation-duration: 0ms;[/align]
[align=left] animation-name: none;[/align]
[align=left] animation-duration: 0ms;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left] .slidedown.out.reverse, .slideup.out.reverse {[/align]
[align=left] /*-webkit-transform: translateY(-100%);[/align]
[align=left] -webkit-animation-name: slideouttotop;[/align]
[align=left] -webkit-animation-duration: 200ms;[/align]
[align=left] -moz-transform: translateY(-100%);[/align]
[align=left] -moz-animation-name: slideouttotop;[/align]
[align=left] -moz-animation-duration: 200ms;[/align]
[align=left] transform: translateY(-100%);[/align]
[align=left] animation-name: slideouttotop;[/align]
[align=left] animation-duration: 200ms;*/[/align]
[align=left] -webkit-transform: none ;[/align]
[align=left] -webkit-animation-name: none ;[/align]
[align=left] -webkit-animation-duration: 200ms ;[/align]
[align=left] -moz-transform: none ;[/align]
[align=left] -moz-animation-name: none ;[/align]
[align=left] -moz-animation-duration: 200ms ;[/align]
[align=left] transform: none;[/align]
[align=left] animation-name: none ;[/align]
[align=left] animation-duration: 200ms ;[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left].slidedown.in.reverse, .slideup.in.reverse {[/align]
[align=left] /*-webkit-animation-name: fadein;[/align]
[align=left] -webkit-animation-duration: 150ms;[/align]
[align=left] -moz-animation-name: fadein;[/align]
[align=left] -moz-animation-duration: 150ms;[/align]
[align=left] animation-name: fadein;[/align]
[align=left] animation-duration: 150ms;*/[/align]
[align=left] -webkit-animation-name: none;[/align]
[align=left] -webkit-animation-duration: 0;[/align]
[align=left] -moz-animation-name: none;[/align]
[align=left] -moz-animation-duration: 0;[/align]
[align=left] animation-name: none;[/align]
[align=left] animation-duration: 0;[/align]
[align=left]}[/align]
[align=left]/*Solve Jquery mobile header show and hide when click the long body*/[/align]
[align=left] [/align]
这个解决方案还是比较ugly的,上述方案实际是取消了slideup和slidedown的效果,带来的副作用就是slideup和slidedown失效。最终发现解决方案如此简单:在header和footer设置如下属性即可data-tap-toggle="false"。
[align=left] [/align]
[align=left] [/align]
[align=left] [/align]
[align=left]/*Solve Jquery mobile header show and hide when click the long body*/[/align]
[align=left].in {[/align]
[align=left] /*-webkit-animation-timing-function: ease-out;[/align]
[align=left] -webkit-animation-duration: 350ms;[/align]
[align=left] -moz-animation-timing-function: ease-out;[/align]
[align=left] -moz-animation-duration: 350ms;[/align]
[align=left] animation-timing-function: ease-out;[/align]
[align=left] animation-duration: 350ms;*/[/align]
[align=left] -webkit-animation-timing-function: none;[/align]
[align=left] -webkit-animation-duration: 0;[/align]
[align=left] -moz-animation-timing-function: none;[/align]
[align=left] -moz-animation-duration: 0;[/align]
[align=left] animation-timing-function: ease-out;[/align]
[align=left] animation-duration: 0;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left].out {[/align]
[align=left] -webkit-animation-timing-function: ease-in;[/align]
[align=left] -webkit-animation-duration: 0;[/align]
[align=left] -moz-animation-timing-function: ease-in;[/align]
[align=left] -moz-animation-duration: 0;[/align]
[align=left] animation-timing-function: ease-in;[/align]
[align=left] animation-duration: 0;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] [/align]
[align=left] [/align]
[align=left].slidedown.in,.slideup.in {[/align]
[align=left] /*-webkit-transform: translateY(0);[/align]
[align=left] -webkit-animation-name: slideinfromtop;[/align]
[align=left] -webkit-animation-duration: 250ms;[/align]
[align=left] -moz-transform: translateY(0);[/align]
[align=left] -moz-animation-name: slideinfromtop;[/align]
[align=left] -moz-animation-duration: 250ms;*/[/align]
[align=left] -webkit-transform: none;[/align]
[align=left] -webkit-animation-name: none;[/align]
[align=left] -webkit-animation-duration: 0ms;[/align]
[align=left] -moz-transform: none;[/align]
[align=left] -moz-animation-name: none;[/align]
[align=left] -moz-animation-duration: 0ms;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left] [/align]
[align=left].slidedown.out,.slideup.out {[/align]
[align=left] /*-webkit-animation-name: fadeout;[/align]
[align=left] -webkit-animation-duration: 100ms;[/align]
[align=left] -moz-animation-name: fadeout;[/align]
[align=left] -moz-animation-duration: 100ms;[/align]
[align=left] animation-name: fadeout;[/align]
[align=left] animation-duration: 100ms;*/[/align]
[align=left] -webkit-animation-name: none;[/align]
[align=left] -webkit-animation-duration: 0ms;[/align]
[align=left] -moz-animation-name: none;[/align]
[align=left] -moz-animation-duration: 0ms;[/align]
[align=left] animation-name: none;[/align]
[align=left] animation-duration: 0ms;[/align]
[align=left]}[/align]
[align=left] [/align]
[align=left] .slidedown.out.reverse, .slideup.out.reverse {[/align]
[align=left] /*-webkit-transform: translateY(-100%);[/align]
[align=left] -webkit-animation-name: slideouttotop;[/align]
[align=left] -webkit-animation-duration: 200ms;[/align]
[align=left] -moz-transform: translateY(-100%);[/align]
[align=left] -moz-animation-name: slideouttotop;[/align]
[align=left] -moz-animation-duration: 200ms;[/align]
[align=left] transform: translateY(-100%);[/align]
[align=left] animation-name: slideouttotop;[/align]
[align=left] animation-duration: 200ms;*/[/align]
[align=left] -webkit-transform: none ;[/align]
[align=left] -webkit-animation-name: none ;[/align]
[align=left] -webkit-animation-duration: 200ms ;[/align]
[align=left] -moz-transform: none ;[/align]
[align=left] -moz-animation-name: none ;[/align]
[align=left] -moz-animation-duration: 200ms ;[/align]
[align=left] transform: none;[/align]
[align=left] animation-name: none ;[/align]
[align=left] animation-duration: 200ms ;[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left].slidedown.in.reverse, .slideup.in.reverse {[/align]
[align=left] /*-webkit-animation-name: fadein;[/align]
[align=left] -webkit-animation-duration: 150ms;[/align]
[align=left] -moz-animation-name: fadein;[/align]
[align=left] -moz-animation-duration: 150ms;[/align]
[align=left] animation-name: fadein;[/align]
[align=left] animation-duration: 150ms;*/[/align]
[align=left] -webkit-animation-name: none;[/align]
[align=left] -webkit-animation-duration: 0;[/align]
[align=left] -moz-animation-name: none;[/align]
[align=left] -moz-animation-duration: 0;[/align]
[align=left] animation-name: none;[/align]
[align=left] animation-duration: 0;[/align]
[align=left]}[/align]
[align=left]/*Solve Jquery mobile header show and hide when click the long body*/[/align]
[align=left] [/align]
这个解决方案还是比较ugly的,上述方案实际是取消了slideup和slidedown的效果,带来的副作用就是slideup和slidedown失效。最终发现解决方案如此简单:在header和footer设置如下属性即可data-tap-toggle="false"。
相关文章推荐
- 解决jquery mobile的header和footer在点击屏幕的时候消失的办法
- jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
- RecyclerView五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- asp.net 数据绑定 使用eval 时候报 字符文本中的字符太多 问题的解决方法
- asp.net 数据绑定 使用eval 时候报 “字符文本中的字符太多” 问题解决
- HTML基础 body标签link属性设置带有超链接的文本未点击时候的颜色
- 解决StoryBoard上cell上定义的view的背景点击后不显示的问题(其中用uiview 当作线的时候最多遇到,会不显示线 而出现不流畅问题)
- 你必须了解的 RecyclerView 的五大开源项目 - 解决上拉加载、下拉刷新和添加 Header、Footer 等问题
- 解决“多个UITableView的时候不能点击状态栏回到顶部”问题
- 解决Button 按钮的点击时候出现边框的问题
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- android 加载web view的时候,点击输入框,导致页面放大的问题解决方法
- TextView设置文本部分可点击时出现文本不显示的问题分析与解决
- 用P3P header解决IE下iframe跨域访问时候session丢失的问题
- 用P3P header解决IE下iframe跨域访问时候session丢失的问题
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- 解决实现注册功能点击注册的时候报错问题
- 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题
- 利用gulp解决前后端分离的header/footer引入问题
- 解决“多个UITableView的时候不能点击状态栏回到顶部”问题