行為層:
我們?cè)诮Y(jié)構(gòu)層中已經(jīng)將所有用于創(chuàng)建九宮格的結(jié)構(gòu)全部刪除了,那么在我們就要在行為層(js)中動(dòng)態(tài)的創(chuàng)建它。
在這里我們會(huì)遇到一個(gè)問(wèn)題:我們想將所有應(yīng)用了class="box"的div都用循環(huán)的方式遍歷出來(lái),以便于我們只需要一個(gè)class就可以自動(dòng)應(yīng)用這種九宮格樣式,可是在js的dom方法中并沒(méi)有一個(gè)已經(jīng)存在的函數(shù),就像“getElementsByTagName”一樣通過(guò)一個(gè)標(biāo)簽名稱來(lái)獲得一個(gè)對(duì)象數(shù)組的方法,我想在這兒我們最想要的是一個(gè)如同“getElementsByClassName”(從字面的意思上是指:根據(jù)一個(gè)class類名獲得一個(gè)對(duì)象的數(shù)組)的方法了。
因此在我們的js中就需要寫一個(gè)這樣的自定義方法:為了更貼近地表達(dá)的我們的意思,我們就將它取名為“getElementsByClassName”。
這個(gè)方法就是傳遞一個(gè)class類名,然后獲得一個(gè)應(yīng)用了這個(gè)class的容器的對(duì)象數(shù)組。
document.getElementsByClassName = function(theName){
var j = 0;
var array = [];
for(var i = 0;(e = document.getElementsByTagName("*")[i]); i++){
if(e.className == theName){
array[j] = e;
j++;
}
}
return array;
}
獲得了所有應(yīng)用了這個(gè)class的div容器的對(duì)象數(shù)組后,我們就可以利用for循環(huán)遍歷每個(gè)對(duì)象,然后分別給它內(nèi)部裝填我們剛才刪除的九宮格結(jié)構(gòu)。因此我們?cè)賱?chuàng)建一個(gè)函數(shù),用來(lái)動(dòng)態(tài)生成結(jié)構(gòu)體:
//根據(jù)類名加載九宮格樣式
function creatDiv(){
divs = document.getElementsByClassName('box');
for (var i = 0; i < divs.length; i++) {
var strhtml = divs[i].innerHTML;
//將結(jié)構(gòu)體封裝在這個(gè)變量中
var indiv = "<div class='top'><span class='t_m'></span></div><span class='t_l'></span><span class='t_r'></span><span class='m_l'></span><span class='m_r'></span><div class='context' id='m_m_" + i + "'></div><div class='b_m'><span></span></div><span class='b_l'></span><span class='b_r'></span>";
divs[i].innerHTML=indiv;
var dd1 = document.getElementById("m_m_"+i);
dd1.innerHTML=strhtml;
}
}
然后我們利用window.onload函數(shù)在窗體一加載時(shí)就加載這個(gè)creatDiv()方法。
window.onload=creatDiv;
這樣在整個(gè)頁(yè)面加載成功后,會(huì)自動(dòng)將所有應(yīng)用了class=”box”的div容器加載成九宮格的結(jié)構(gòu)樣式。
經(jīng)過(guò)上述的一番改頭換面的修改后,一個(gè)更健壯,三層分離的完美九宮格就被我們打造出來(lái)了。這種布局可以應(yīng)用到很多地方,并且因?yàn)槠鋸?qiáng)大的自適應(yīng)功能和靈活多變的風(fēng)格更受廣大朋友的喜愛(ài)。下面是演示效果截圖:
本模型在以下瀏覽器中測(cè)試通過(guò):
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
原文:http://www.cnblogs.com/binyong/archive/2009/06/24/1508289.html
聯(lián)系客服