在做一个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的显示和隐藏,最终达到效果,代码如下:
     
 
 
/*Solve Jquery mobile header show and hide when click the long body*/
.in {
    /*-webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;*/
    -webkit-animation-timing-function: none;
    -webkit-animation-duration: 0;
    -moz-animation-timing-function: none;
    -moz-animation-duration: 0;
    animation-timing-function: ease-out;
    animation-duration: 0;
}
 
.out {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0;
    animation-timing-function: ease-in;
    animation-duration: 0;
}
 
 
 
 
.slidedown.in,.slideup.in {
    /*-webkit-transform: translateY(0);
    -webkit-animation-name: slideinfromtop;
    -webkit-animation-duration: 250ms;
    -moz-transform: translateY(0);
    -moz-animation-name: slideinfromtop;
    -moz-animation-duration: 250ms;*/
    -webkit-transform: none;
    -webkit-animation-name: none;
    -webkit-animation-duration: 0ms;
    -moz-transform: none;
    -moz-animation-name: none;
    -moz-animation-duration: 0ms;
}
 
 
.slidedown.out,.slideup.out {
    /*-webkit-animation-name: fadeout;
    -webkit-animation-duration: 100ms;
    -moz-animation-name: fadeout;
    -moz-animation-duration: 100ms;
    animation-name: fadeout;
    animation-duration: 100ms;*/
    -webkit-animation-name: none;
    -webkit-animation-duration: 0ms;
    -moz-animation-name: none;
    -moz-animation-duration: 0ms;
    animation-name: none;
    animation-duration: 0ms;
}
 
    .slidedown.out.reverse, .slideup.out.reverse {
        /*-webkit-transform: translateY(-100%);
        -webkit-animation-name: slideouttotop;
        -webkit-animation-duration: 200ms;
        -moz-transform: translateY(-100%);
        -moz-animation-name: slideouttotop;
        -moz-animation-duration: 200ms;
        transform: translateY(-100%);
        animation-name: slideouttotop;
        animation-duration: 200ms;*/
        -webkit-transform: none ;
        -webkit-animation-name: none ;
        -webkit-animation-duration: 200ms ;
        -moz-transform: none ;
        -moz-animation-name: none ;
        -moz-animation-duration: 200ms ;
        transform: none;
        animation-name: none ;
        animation-duration: 200ms ;
    }
 
.slidedown.in.reverse, .slideup.in.reverse {
    /*-webkit-animation-name: fadein;
    -webkit-animation-duration: 150ms;
    -moz-animation-name: fadein;
    -moz-animation-duration: 150ms;
    animation-name: fadein;
    animation-duration: 150ms;*/
    -webkit-animation-name: none;
    -webkit-animation-duration: 0;
    -moz-animation-name: none;
    -moz-animation-duration: 0;
    animation-name: none;
    animation-duration: 0;
}
/*Solve Jquery mobile header show and hide when click the long body*/
 

   这个解决方案还是比较ugly的,上述方案实际是取消了slideup和slidedown的效果,带来的副作用就是slideup和slidedown失效。最终发现解决方案如此简单:在header和footer设置如下属性即可data-tap-toggle="false"。

解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题的更多相关文章

  1. jquery Mobile点击显示加载等待效果

    点击某个按钮或链接时,触发等待加载效果: <script> <!-- $(document).bind("mobileinit", function(){ }); ...

  2. 解决jquery mobile的遇到高版本Chrome一直转圈,页面加载不出来的情况。

    把这么一段代码,加到jquery.mobile.js中后问题解决了. $(document).on('mobileinit',function(){ $.mobile.changePage.defau ...

  3. 你必须了解的RecyclerView的五大开源项目-解决上拉加载、下拉刷新和添加Header、Footer等问题

    前段时间做项目由于采用的MD设计,所以必须要使用RecyclerView全面代替ListView.但是开发中遇到了需要实现RecyclerView上拉加载.下拉刷新和添加Header以及Footer等 ...

  4. 解决jquery mobile的header和footer在点击屏幕的时候消失的办法

    给header和footer添加 data-position="fixed" 和 data-tap-toggle="false"即可,代码如下: <div ...

  5. 以“图片渐入渐出”为例讲述jQuery插件的具体实现

    首先声明,此代码以网友“斯迈欧”原创作为此例的讲解: 在这之前我们先看看我们要做的效果是什么样的: 解析下面的样式:我们要图片在过“一定时间”后自动切换,在右下角处有小方块似数字1,2,3,4,这些数 ...

  6. jquery( 点击按钮出来文本框并限制文本框的个数)

    // 首先呢  编辑这个文章  主要是用于和大家的交流  以便学习和交流!! <div class="form-group" id="spots"> ...

  7. 第十三篇、jQuery Mobile

    API-->搜索data 0.page data-transition="slide" // 页面切换效果 data-position="fixed" / ...

  8. 常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)

      来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器. ...

  9. JQuery Mobile - 解决动态更新页面内容,CSS失效问题!

    今天编写JQuery Mobile程序,需要对数组数据动态创建,并且每条数据对应一个复选框,于是我很顺利写了一个Demo,当我运行时候发现,和我期望的不一样!复选框确实创建出来了,但是却没有CSS效果 ...

随机推荐

  1. docker run elasticsearch

    docker run -d --name=esNode1 -p 9200:9200 -p 9300:9300 elasticsearch:2.3 -Des.network.publish_host=& ...

  2. 检测到有潜在危险的 Request.Form 值

    这种问题是因为你提交的Form中有HTML字符串,例如你在TextBox中输入了html标签,或者在页面中使用了HtmlEditor组件等,解决办法是禁用validateRequest. 如果你是.n ...

  3. Spring MVC学习笔记——完整的用户登录

    1.搭建环境的第一步是导包,把下面这些包都导入工程中 /media/common/工作/Ubuntu软件/SpringMVC_jar包整理/aop/media/common/工作/Ubuntu软件/S ...

  4. Android广播接收器BroadcastRceiver

    一.使用BroadcastRceiver 1.创建BroadcastRceiver(MyRceiver),重写OnReceiver: public void onReceive(Context con ...

  5. Linux 下安装JRuby

    安装ruby cd git clone https://github.com/rbenv/rbenv.git ~/.rbenv echo 'export PATH="$HOME/.rbenv ...

  6. spring 参数绑定

    部分资料来源: @RequestParam @RequestBody @PathVariable 等参数绑定注解详解 spring学习之@ModelAttribute运用详解 Spring MVC @ ...

  7. 如何利用谷歌浏览器快速的通过方法名来确定多个js文件中的某一具体文件;

  8. ubuntu配置ftp服务器

    sudo apt-get update sudo apt-get install vsftpd sudo vi /etc/vsftpd.conf listen=YES anonymous_enable ...

  9. DataScientist————汇总篇

    为了方便阅读查找.把写的其他关于机器学习的博客汇总在这里. ---------------------------------------------------------------------- ...

  10. 使用ndk编译c可执行程序

    1.创建工程目录  在ubuntu系统下搭建好ndk编译环境,创建test目录 mkdir test 在test目录下创建jni目录 cd test mkdir jni 2.编写源代码 vim hel ...