tuy

使用js去动态渲染容器定位小结

刚刚做完:海运运输工具单证录入的交互
url:http://6.1.9.229:8080/ship/document/edit.jsp

交互的方案大概是这样子:这是一张全屏界面,左侧有一列tab,tab的宽度是固定的,tab里面有许多个按钮,不同按钮触发不同的右侧内容显示,右侧内容是通过js判断浏览器窗口宽度,再用这个宽度减去左侧宽度计算出来;

一拿到这个需求的时候,我感觉思路非常清晰,基于jq框架,实现如下:
1:把右侧内容都设置为display:none,然后当前的右侧设置为display:block.
2:计算浏览器宽度var windowW=$(window).width();再用浏览器宽度减去左侧宽度,把宽度值赋给右侧内容,同时给右侧设置left跟top的定位信息.
3:然后就是点击不同tab,显示不同右侧了,这个比较熟悉,我马上用$(this).index()判断出tab中按钮的序列号,然后根据序列号,让右侧的等价序列显示出来,$(".right").eq(i)显示;
通过以上三部,就实现了,此次交互,我调试下兼容性之后,就打包发给了后台开发;开发打开一看,点击了下,我准确实现了最初的交互需求,这样一来,好像整个事情就完美的结束了,其实故事才刚刚开始。

开发人员在我的压缩包里面打开没有问题,但是当把我的元素,拿到项目中去之后,点击tab不能出现右侧相应内容了,后来我通过调试发现,开发项目组用的是jq1.4版本,不支持index()寻找序列号,后来我就手工给tab每个按钮加了testn属性,用于取代index()的定位,根据testn的值,然后显示右侧对应序列的内容,因为jq1.4依然支持eq(i)匹配。

时间又过了一周,我们公司的测试人员发现我们的界面在刷新的时候,会有一个比较剧烈的动画载入,点击tab的时候,完全没有这个问题,我只想说,测试人员,你好犀利!!
拿到这个问题之后,我比较棘手;首先我用chrome浏览器先试了下,发现是没有这个动画载入的,所以应该跟浏览器内核自身的渲染机制也有关;果然,后来我测试发现,在IE7下面,是从右侧移到左侧;在IE8、9下是从左侧移到右侧,但是移来移去的最终结果都是定位在我预先设定好的位置,只是这个过程影响用户体验,为了更好的用户体验,我得继续研究下去。刚开始尝试了下,让元素先隐藏,再延时定位,这样定位就在隐藏的时间段里面了,然后再显示出来,后来做完发现,问题依然存在,延时只是延时了定位,定位那一刻,还是会画面抖动;后来我又升级了jq版本,也无济于事,还是把版本降回到1.4,因为很多功能都是基于1.4版本的。因为这个问题我也是第一次碰到,以前从没考虑这么边缘的问题,时间一分一秒过去,终于最后我发现是定位定的太晚了,因为左侧宽度固定,右侧内容距离左侧的位置是死的,随便浏览器宽度怎么变化,这个位置是固定的,后来我把定位信息,直接放在样式表里,果然左右就不抖动了,但是上下还是有抖动,最后同理调试好上面位移,因为js里面定位的所有样式,都是滞后于样式表的,是样式表加载完,再加载js修改样式,然后再在js里面赋值给右侧宽度,所有这些定位完毕之后,最后再让右侧内容display:block,这样一来,整个定位就不抖动了,很平滑的显示出来。

我之所以记录这个问题,是因为有时候你会倾向于把定位直接放在样式表中,就侥幸地避开了这个问题,定位在js里,而且这个容器又显示的话,是会出现抖动现象的,因为容器本来有一个样式表里定义好的样式,你现在用js又重新渲染了一下样式,作为容器肯定要实时做出响应!

由于笔者是技术菜,所以很多地方肯定都有出错,希望大家不吝指正;
我的目标是解决问题,我的理想是漂亮的解决问题。

码字很辛苦,转载请注明来自tuy博客《使用js去动态渲染容器定位小结》

评论

  1. 3333 #1

    1231123

    回复
    2015-06-2
  2. 3333 #2

    erwe

    回复
    2015-06-2
  3. sdfds #3

    :???: sdf

    回复
    2015-06-10