8.布局


8.1 容器

  <Object>元素的布局, 就是其位置和大小。其位置和页面上下文有关,而高度和宽度则有 height、width属性,其原始语法是这样的:
<Object height='100%' width='100%' ... >
或
<Object height='300px' width='200px' ... >
  即可以用百分比或像素数来决定其大小.
  在dynaload.js的函数中,<Object> 的默认宽度和高度均为 100%,这个百分比是相对于上下文的容器的,例如 div、td:
<div style="position:relative;width:96%;height:400px">
    <script>insertReport('AF', '')</script>
</div>
 或
...
<tr height="400px">
 <td>
  <script>insertReport('AF', '')</script>
 </td>
</tr>
...
  上述的 <div> ... </div>、<td> ... </td> 就相当于是Object对象的容器,从理论上说,如果容器位置和大小变化了,Object也会跟着变化、容器隐藏了,Object也会跟着隐藏。



8.2 容器注意事项

  div 容器的初始高度是不能采用百分比的,必须采用像素, 如下的写法是有问题的
<div style="position:relative;width:96%;height:70%">
    <script>insertReport('AF', '')</script>
</div>
  上例中 div 的初始高度为百分比(70%) 将导致较为严重的结果,具体症状表现为控件无法显示、或者每10次中有1、2次显示不出来,需要手工刷新页面.
  正确的做法是给采用像素高度,然后在页面的 resize 事件中计算出分配给它的高度,动态更改高度。

宽度 (width) 允许采用百分比.




8.3 更复杂的场景

  由于<Object>是一种特殊的元素,它的高度相对于容器是100%的,在某些情况下,比如页面布局较为复杂、页面中有多个控件,此时 <Object> 的初始高度有时未必会跟着变化,所以,我们也可以采用固定的像素数,将上述的脚本改成如下的形式
<div style="position:relative;width:96%">
    <script>insertReport('AF', '', '400px')</script>
</div>
 或
...
<tr height="400px">
 <td>
  <script>insertReport('AF', '', '400px')</script>
 </td>
</tr>
...
  insertReport( ) 的第三个参数是隐含参数,其含义是<Object>的初始高度,您分析一下 dynaload.js 就能知道这个原理.

  当您需要动态修改 <Object> 的高度时,可以直接修改它的 height 属性,比如:
AF.height = '230px';
//或者
AF.height = 230;

如果您把 插件/加载项 安置在<Form>中,在IE下可能会遇到问题,请参见底下的 “10.不同浏览器之间的一些差别”.




8.4 其它注意事项

  容器的书写,尽可能保持单一、简洁,不要将其它元素混杂在一起,如下写法就非常不妥
<div style="position:relative;width:96%;height:400px">
 <script>
  insertReport('AF', '');
  alert('...');
 </script>
 <input type='button' value='Text'>
</div>