Mobile Web项目中碰到的问题及解决

本人记性差,上次那个bug现在又遇到了一时之间居然想不起来了.因此,像其他博友一样,很有必要记录一下.

1 使用iScroll显示图片,在chrome及手机上没有滚动条或者刷新后滚动出现问题而且无法很好的滚动.

问题描述:

在firefox上测试,图片可以流畅的进行滚动. 但是在chrome和手机上,触摸滚动时,图片只移动一点点,而且滚动条不显示.

左图为firefox上的显示,右图为chrome上的显示.

原因: iScroll是根据当前页面的显示宽高(wrapper)和滚动视图(scroller)来确定滚动条的大小.但是由于这些图片(<img>)没有指定具体的height和width,导致wrapper的宽高计算不正确,滚动条也无法显示(具体没有很深入的去看iScroll的源码)

解决: 原因找到后那就quite easy了.只要给img设定宽高即可. 以后要养成不偷懒的好习惯,不管是前台html标签还是后台struts的Action都要按照标准来,否则会产生不必要的麻烦.

2 在带checkbox列的表格上实现点击表头中除checkbox以外的elements后也能select all时,结果总是与期待的相反,即点击选中后是反选,而不是全选.(使用jquery)

问题描述&原因:

表头做了个select all功能,但是由于在手机上checkbox框体会非常mini,用"硕大"的手指几乎点不到.因此表头checkbox所在的单元格也接受click,来触发checkbox的click事件.

这个功能正常的思路是:checkbox绑定click事件,单元格也绑定click事件,当点击时触发checkbox的click事件.

这个例子说简单也不简单,会碰到几个问题.

(1) jquery中触发checkbox的事件时,

         如果通过点击checkbox触发,那么click事件代码的执行是在checkbox状态改变后,这个逻辑是符合我们要求的

         但是如果采用trigger("click")或者click(),那么click事件代码的执行是在checkbox状态改变之前,这个逻辑正好相反. 这个问题不要怪jquery,这样做是合情合理的,当你submit表单时,肯定会用到return false来阻止表单的提交. 而这个逻辑就是用来决定元素的状态或者事件是否触发.

(2) 如果checkbox的click里面不阻止事件冒泡,那么你的浏览器会口吐白沫.因为会碰到你点击了checkbox,先触发它自己的click事件,再触发单元格的click事件,单元格再触发它自己的click事件...然后你懂的.

(3) 单元格的click事件中一定要排除checkbox,否则checkbox相当于点击了两次.

解决:

对问题(1),可以使用change()事件,这玩意儿是在状态改变后才触发,而且必须是钢钢的,但要注意低版本的jquery不支持checkbox的change的事件. Tips:我用的1.8.3是ok的.

对问题(2), event.stopPropagation()来阻止口吐白沫现象.

贴上自己做的小demo.

<style type="text/css">
*{
    margin:0 auto;
}
.page{
    margin-top:20px;
    text-align:center;
    width:100%;
}
.content{
    width:300px;
    border:solid 1px #C0C0C0;
    padding:10px;
    cursor:pointer;
    border-radius:10px;
}
.content span{
    font-weight:bold;
    display:block;
}
.gradient{
    background: rgb(246,248,249); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */
}
.selected{
    background: #d0e4f7; /* Old browsers */
    background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* IE10+ */
    background: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C */
}
#infoDiv{
   /*margin-top:20px;*/
   position:absolute;
   right:10px;
   top:10px;
   border:solid 1px #999;
   width:200px;
   padding:10px;
   height:30px;
   border-radius:10px;
}
#showInfo{
   font-size:15px;
   font-weight:bold;
   line-height:30px;
}
</style>
<!-- 之前用1.4.2版本,change事件不触发 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#infoDiv").hide();
    //默认页面刷新后checkbox状态不会改变,所以有必要先判断一下,保证selected样式不会张冠李戴
    $(".content").filter(":has(':checkbox:checked')").addClass("selected").end().click(function(event){
        //必须要这样写(如果点击的是checkbox兄,则别鸟他),否则checkbox被点击了两次,相当于没点击.
        if (event.target.type != 'checkbox') {
          $(':checkbox', this).trigger('click');
        }
    });
    $("#selectAll").change(function(event){
        $(this).parent("div").toggleClass("selected");
        var info = $(this).attr("type") + ($(this).is(":checked")?" is selected":" is unselected");
        $("#showInfo").html(info);
        $("#infoDiv").fadeIn("normal");
        $("#infoDiv").fadeOut(4000);
        //阻止白沫   P.S. 不知怎么回事,最近firefox老是白沫
        event.stopPropagation();
    });
});
</script>

<div class="page">
  <div class="content gradient">
     <span>Select All</span>
     <input type="checkbox" id="selectAll"/>
  </div>
  <div id="infoDiv" class="gradient">
     <span id="showInfo">
     </span>
  </div>
</div>

...懒人等待下次更新