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

     在做一个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*/
 
 
     其中各个class中注释的代码为JqueryMobile原生CSS。这个解决方案还是比较ugly的,如果有什么好的方案,希望大家共同讨论下。

解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题,布布扣,bubuko.com

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

上一篇:[ASP.NET]强大的网页处理类NSoup


下一篇:telnet执行过程及验证远程服务器是否打开