快捷導(dǎo)航

腳本動(dòng)態(tài)生成VML

更新時(shí)間：2006年12月24日 00:00:00 作者：

我們編寫 VML 很重要的就是要和數(shù)據(jù)庫結(jié)合，如果和數(shù)據(jù)庫結(jié)合了，讀數(shù)據(jù)和把數(shù)據(jù)轉(zhuǎn)換成 VML 變成了兩部分。如果直接使用 ASP 生成包含很多 VML 的頁面，一旦數(shù)據(jù)量多了，整個(gè)頁面就變得很龐大，下載速度慢了，IE解釋代碼的速度也慢了，所以用腳本動(dòng)態(tài)生成 VML 變得非常重要了。

    用 VML 畫一個(gè)示意圖，可以更明確上面的意義：

    前面的圖文簡單的說就是：使用一個(gè) Iframe 做后臺(tái)，前臺(tái)用腳本生成。也許擔(dān)心，后臺(tái)已經(jīng)完成了，但前臺(tái)還沒有初始化的情況，你可以放心，因?yàn)樽x數(shù)據(jù)的過程肯定相對要慢，如果擔(dān)心數(shù)據(jù)量少，只要你把腳本放在 Body 前面，Iframe 放在 Body 的最后面，就不會(huì)產(chǎn)生同步錯(cuò)誤的問題了。
    現(xiàn)在來具體講講如何用腳本動(dòng)態(tài)產(chǎn)生 VML 。其實(shí)這和用腳本動(dòng)態(tài)產(chǎn)生 HTML 是一樣的過程。

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>動(dòng)態(tài)創(chuàng)建VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="JavaScript">
function createPoint(x,y,v)
{
var strElement="<v:rect title='"+v+"' style='top:"+x+";left:"+y+"width:100;height:100'></v:rect>";
var newPoint = document.createElement(strElemnt);
group1.insertBefore(newPoint);
}
</script>
<body>
<v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;" coordsize = "200,200">
</v:group>
<iframe src="readData.asp" name="data" style="display:none"></iframe>
</body>
</html>

相應(yīng)的在 readData.asp 里面:

    看完上面的，是否對這種模式有所理解呢？下面談?wù)剟?dòng)態(tài)生成 VML 所要注意的一些問題，先說說 document 的 createElement 方法。IE版本不同， createElement 的使用也有所區(qū)別，在早期版本的IE， createElement 只能創(chuàng)建 Select 里面 OPTION ，比如說 var newOption=document.createElement("OPTION"); 但在 IE5.0 以后，createElement 可以創(chuàng)建所有的對象，使用的方式是 var newElement=document.createElement("<div id='oDIV'></div>"); 注意到?jīng)]有，這里的參數(shù)必須是個(gè)完成的 HTML 標(biāo)記，而不是 DIV，用這個(gè)方法的好處就是，可以用一個(gè)語句把新創(chuàng)建的對象描述清楚。insertBefore 方法很好用，它把新創(chuàng)建的對象插入到最后。
    我們一開始就有了 Group1 ，所有以后動(dòng)態(tài)生成的 VML 直接插入到 Group1 的后面就可以了。曾經(jīng)做了三個(gè)實(shí)驗(yàn)，第一個(gè)是普通的，用ASP生成 VML 代碼；第二個(gè)是不用Iframe，在同一個(gè)頁面生成腳本；第三個(gè)就是上面的例子，使用Iframe 產(chǎn)生腳本。結(jié)果在大數(shù)據(jù)量的條件下，效率最高的是第三個(gè)，其次是第二個(gè)，第一個(gè)有明顯的慢的感覺。
    接下來的一節(jié)，將講述VML最激動(dòng)人心的功能，放大縮小！