每個 ZK 元件都會在瀏覽器產生對應的 HTML element ,有些很複雜、有些較簡單,當然越複雜的 HTML 對瀏覽器記憶體、效能的負擔就越大。所以沒有必要時,不要選擇成本較高的元件。
例如只是要把某一群元件包在一個區域,也許要插入新元件或是整群處理時,可以用 <div>
就好,而不要用 <window>
。
如果只是要將多個元件水平排列,而並不需要控制其對齊位置的時候,則應該使用 <hlayout>
即可,而不需要用 <hbox>
。同樣的道理,簡單的垂直排列需求可以用 <vlayout>
完成而不需用 <vbox>
。
以一個內含兩個元件的 <hbox>
為例:
<hbox>
<div>hbox</div>
<div>hbox</div>
</hbox>
其所產生的 HTML 如下:
<table id="zFLQ5" class="z-hbox" cellpadding="0" cellspacing="0"
border="0">
<tbody>
<tr valign="top">
<td id="zFLQ5-frame" style="width:100%;height:100%"
align="left">
<table id="zFLQ5-real" height="100%" cellpadding="0"
cellspacing="0" border="0" style="text-align:left">
<tbody>
<tr valign="top">
<td id="zFLQ6-chdex" style="height:100%">
<div id="zFLQ6" class="z-div">
<span id="zFLQ7" class="z-label">
hbox
</span>
</div>
</td>
<td id="zFLQ6-chdex2"
class="z-hbox-separator">
<img style="height:0;width:0"></td>
<td id="zFLQ8-chdex" style="height:100%">
<div id="zFLQ8" class="z-div">
<span id="zFLQ9" class="z-label">
hbox
</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
若是以一個同樣內含兩個元件的 <hlayout>
來比較如:
<hlayout>
<div>hlayout</div>
<div>hlayout</div>
</hlayout>
其所產生的 HTML 就小很多:
<div id="zFLQ0" class="z-hlayout">
<div id="zFLQ1-chdex" class="z-hlayout-inner"
style="padding-right:5px">
<div id="zFLQ1" class="z-div">
<span id="zFLQ2" class="z-label">hlayout</span>
</div>
</div>
<div id="zFLQ3-chdex" class="z-hlayout-inner" style="">
<div id="zFLQ3" class="z-div">
<span id="zFLQ4" class="z-label">hlayout</span>
</div>
</div>
</div>
留言