DWZ (JUI) 教程 layoutH

有些刚刚入门的朋友 对layoutH不是很理解,我简单画个图,稍微解释一下

DWZ (JUI) 教程 layoutH


[javascript] view plain copy
  1. layoutH:function($refBox){
  2. returnthis.each(function(){
  3. var$this=$(this);
  4. if(!$refBox)$refBox=$this.parents("div.layoutBox:first");
  5. variRefH=$refBox.height();
  6. variLayoutH=parseInt($this.attr("layoutH"));
  7. variH=iRefH-iLayoutH>50?iRefH-iLayoutH:50;
  8. if($this.isTag("table")){
  9. $this.removeAttr("layoutH").wrap('<divlayoutH="'+iLayoutH+'"style="overflow:auto;height:'+iH+'px"></div>');
  10. }else{
  11. $this.height(iH).css("overflow","auto");
  12. }
  13. });
  14. },

这是layoutH函数的源代码

从源代码中大家很清楚的知到

如果你对 B 元素指定了 layoutH 为 XXX 那么他的最终高度 为 他的div.layoutBox:first 父容器 减去layoutH 的高度,如果小于50的话 就为50


一般来讲 layoutH 为 A 和 C的高度的和。 所以如果在Window 和 tab页中 下面的按钮显示不全,增加layoutH 就可以了。


掌握住这样的原理layoutH 可以指定在任何你想使用的元素上,不单单在table上,比方说你使用是Ajax 动态tab选项卡,就可以指定Content layoutH

使它动态自适应高度,从而达到灵活使用的目的。


转载请标明出处http://blog.csdn.net/jiweigang1/article/details/7837172

你可能感兴趣的:(layout)