在做一个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. WinForm------DateEdit属性设置

    1.只能选择年份属性设置                       

  2. Python Day11

    RabbitMQ队列 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列 ...

  3. dos 批处学习笔记

    dos 批处理@ 只显示命令结果echo 回显pause 暂停del 删除set 查看系统变量>nul 正确命令输入空洞2>nul 错误命令输入空洞dir 显示目录和文件&& ...

  4. MyEclipse部署web项目到Tomcat出现An internal error occurred during: "Launching on Tomcat 7.x"的问题

    如果出现了上述的错误按照如下的3个步骤解决:1.首先关闭MyEclipse工作空间.2.然后删除工作空间下的文件."MyEclipse10\workspace.metadata.plugin ...

  5. Struts2之HelloWorld

    首先既然是开发Struts程序的话,那么自然需要用到Struts2开发包,Struts2是apache旗下的开源框架,所有的开发包和源代码都可以在Apache官网下载. 那么,就来开始编写第一个Str ...

  6. js计时器,点击开始计时,再点击停止

    点击倒计时开始,点击停止,再次点击又开始,再点停止... <i id=</i>秒 <em onclick="timeOpen();">开始</e ...

  7. JSP多文件上传到服务器

    问题描述: 作为一个Java开发Web方向的程序员,很重要的一个功能,就是上传文件功能是一定要掌握的,今天整理了一下代码. 1.JSP显示界面代码和动态添加上传文件个数. <%@ page la ...

  8. 室内定位系列(一)——WiFi位置指纹(译)

    原文:<Advanced Location-Based Technologies and Services>--chapter 2 WiFi Location Fingerprint 作者 ...

  9. ibatis 轻松入门

    1.总中的配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE sqlMapConfig ...

  10. Set集合的使用

    #include<iostream> #include<set> using namespace std; typedef struct { int i,j; char s; ...