中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

行為層：

我們在結(jié)構(gòu)層中已經(jīng)將所有用于創(chuàng)建九宮格的結(jié)構(gòu)全部刪除了，那么在我們就要在行為層（js）中動態(tài)的創(chuàng)建它。

在這里我們會遇到一個問題：我們想將所有應(yīng)用了class="box"的div都用循環(huán)的方式遍歷出來，以便于我們只需要一個class就可以自動應(yīng)用這種九宮格樣式，可是在js的dom方法中并沒有一個已經(jīng)存在的函數(shù)，就像“getElementsByTagName”一樣通過一個標(biāo)簽名稱來獲得一個對象數(shù)組的方法，我想在這兒我們最想要的是一個如同“getElementsByClassName”（從字面的意思上是指：根據(jù)一個class類名獲得一個對象的數(shù)組）的方法了。

因此在我們的js中就需要寫一個這樣的自定義方法：為了更貼近地表達(dá)的我們的意思，我們就將它取名為“getElementsByClassName”。

這個方法就是傳遞一個class類名，然后獲得一個應(yīng)用了這個class的容器的對象數(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)用了這個class的div容器的對象數(shù)組后，我們就可以利用for循環(huán)遍歷每個對象，然后分別給它內(nèi)部裝填我們剛才刪除的九宮格結(jié)構(gòu)。因此我們再創(chuàng)建一個函數(shù)，用來動態(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)體封裝在這個變量中
     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ù)在窗體一加載時就加載這個creatDiv（）方法。

window.onload=creatDiv;      

這樣在整個頁面加載成功后，會自動將所有應(yīng)用了class=”box”的div容器加載成九宮格的結(jié)構(gòu)樣式。

經(jīng)過上述的一番改頭換面的修改后，一個更健壯，三層分離的完美九宮格就被我們打造出來了。這種布局可以應(yīng)用到很多地方，并且因?yàn)槠鋸?qiáng)大的自適應(yīng)功能和靈活多變的風(fēng)格更受廣大朋友的喜愛。下面是演示效果截圖：

本模型在以下瀏覽器中測試通過：

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

點(diǎn)擊查看演示Demo

原文：http://www.cnblogs.com/binyong/archive/2009/06/24/1508289.html

本文鏈接：http://m.95time.cn/tech/web/2009/6817.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 三層分離的完美九宮格 [1] 下一頁

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。