動態添加Tab頁總結

有時間總結了下動態添加tab頁的相關知識:

     非常鄙視那些引用我文章的網站和個人網站，引用了別人的東西還帶商業廣告！~在此謝絕轉載

    一。 首先得寫個動態添加Tab頁的JS操作檔案，我想在網上應該能找到，喜歡自己可以寫

   二 。其次是 寫個動態添加Tab頁的樣式CSS檔案，控制TAB標籤等樣式

   三。相關使用操作

動態添加Tab頁的JS代碼，起個名吧，就叫“DynamicTab.js”，代碼如下：

 

//tab顯示地區類//TabZone結構為：//參數說明：//id:需要動態建立TabPage的地區id//activeCSS:啟用狀態的tab樣式//inactiveCSS:未啟用狀態的tab樣式//zoneCSS:整個TabZone包含TabPage的樣式function TabZone(id,activeCSS,inactiveCSS,zoneCSS){//啟用時的標籤樣式類this.activeCSS = activeCSS;//未啟用時的標籤樣式類this.inactiveCSS = inactiveCSS;//最外層顯示地區this.outerZone = $(id);this.outerZone.className = zoneCSS;//動態建立tab及page地區if(this.outerZone.childElements().length == 0 ||(this.outerZone.down() && this.outerZone.down().tagName.toLowerCase() != "ul") ||(this.outerZone.down().next() && this.outerZone.down().next().tagName.toLowerCase() != "div")){var frag = document.createDocumentFragment();var ul = document.createElement("ul");var div = document.createElement("div");frag.appendChild(ul);frag.appendChild(div);this.outerZone.innerHTML = "";this.outerZone.appendChild(frag);}//內部的tab標籤地區this.innerTabZone = this.outerZone.down();//內部的顯示Pages的地區this.innerPageZone = this.innerTabZone.next();//儲存生存期內所有添加的TabPage對象this.tabs = new Array();}//向TabZone添加TabTabZone.prototype.addTab = function(obj){this.tabs[this.tabs.length] = obj;//添加事件監聽var realContext = this;var focus =this.focus;//使用Event.observe會使上下文環境發生變化，進而無法直接使用this被指向其他引用//使用call改變this所指對象Event.observe(obj.tab, 'click',function(e){focus.call(realContext,obj);});//為未保護的tab添加關閉事件if(!obj.protect){var close = this.close;Event.observe(obj.tab, 'dblclick',function(e){close.call(realContext,obj);});}//添加事件結束//文檔中添加tab及pagethis.innerTabZone.appendChild(obj.tab);this.innerPageZone.appendChild(obj.page);this.focus(obj);}//關閉所有未保護的TabPageTabZone.prototype.closeAll = function(){var tabCount = this.tabs.length;for(var i=this.tabs.length-1;i>=0;i--){if(!this.tabs[i].protect){this.innerTabZone.removeChild(this.tabs[i].tab);this.innerPageZone.removeChild(this.tabs[i].page);this.tabs.splice(i,1);}}//關閉未保護的tab後處理焦點if(tabCount > this.tabs.length && this.tabs.length > 0){this.focus(this.tabs[0]);}}//隱藏除了指定參數的tabTabZone.prototype.hideExcept = function(obj){for(var i=0;i0){this.focus(this.tabs[i]);}else if(i > 0){this.focus(this.tabs[i-1]);}return;}}}}//tab頁類//name：tab標籤名稱//src：page指向的頁面地址//protect：bool，指明tab是否可以被保護，被保護的tab不可被關閉function TabPage(name,src,protect){this.protect = protect==true?true:false;//tabthis.tab = document.createElement("li");this.tab.innerHTML = name==undefined?"untitled":name;//page地區this.page = document.createElement("div");//page實際內容頁面var iframe = document.createElement("iframe");iframe.frameBorder = 0;iframe.src = src==undefined?"":src;//iframe添加入page地區this.page.appendChild(iframe);}

動態添加Tab頁的CSS樣式代碼，起個名吧，就叫“DynamicTab.css”，代碼如下：

.TabZone{font-size: 12px;width: 100%;background: #fff;}.TabZone ul{position: relative;display: block;float: left;padding: 0 0 0 0px;padding: 0px 0px 0px 10px;list-style: none;height: 26px;z-index: 99999;background: #ebebeb url(../images/tabBackGround.gif) repeat-x top;width: 100%;}.TabZone ul li{float: left;display: block;margin: 5px 3px 0 0;padding: 0 15px;cursor: default;height: 20px;line-height: 20px;}.TabZone ul li.ActiveCSS{background: url(../images/tabOn.gif) repeat-x top;color: #38b0ff;height: 22px;line-height: 22px;vertical-align: middle;text-align: center;border-left: solid 1px #1d4c94;border-top: solid 1px #1d4c94;border-right: solid 1px #1d4c94;}.TabZone ul li.InactiveCSS{color: #38b0ff;background: url(../images/tabOut.gif) repeat-x top;height: 22px;line-height: 22px;vertical-align: middle;text-align: center;border-left: solid 1px #1d4c94;border-top: solid 1px #1d4c94;border-right: solid 1px #1d4c94;}.TabZone div{position: relative;width: 100%;height: 100%;z-index: 0;margin-top: 3px;}.TabZone div div{height: 100%;width: 100%;}.TabZone div div iframe{position: relative;width: 100%;height: 100%;}

 

1.在ASP.NET 中使用動態添加Tab架構：

//引用檔案

<script type="text/javascript" src="js/DynamicTab.js"></script>

//動態添加Tab的地區
<div id="tabZone"></div>
<script type="text/jscript">
        var tabZone = new TabZone("tabZone","ActiveCSS","InactiveCSS","TabZone");
        //  one.aspx 為首次載入架構時顯示的頁面
        tabZone.addTab(new TabPage("顯示標籤名字","one.aspx",true));
       
        function addTab(title,src){
            tabZone.addTab(new TabPage(title,src,false));
        }
    </script>

2.one.aspx 頁面

//在one.aspx 裡你可以添加任何的連結開啟一個頁面，然後這個頁面會以動態Tab形式顯示出來

     <a href="javascript:parent.addTab('動態添加頁面的標籤1:',two.aspx')";>詳細資料1</a>

     <a href="javascript:parent.addTab('動態添加頁面的標籤2:',two.aspx')";>詳細資料2</a>

3.two.aspx頁面

這個頁面當然就是一些資訊了，你還可以做到三級的動態Tab連結

4.至於要實現動態載入時標籤的樣式效果或者更漂亮你可以在CSS上寫

有問題可以一起探討，歡迎光顧一起學習

 

 

後續--------------------

後面根據需要又添加了個關閉標籤的方法，比如在刪除的時候會用到，在刪除某個東東後要關閉當前TAB中開啟的TAB，即關閉標籤頁

實現如下：

1.在DynamicTab.js中添加個方法

 

//關閉指定的標籤
TabZone.prototype.closeTag = function(obj){
        for(var i=0;i<this.tabs.length;i++){
            //判斷TAB中的標籤名是否和要關閉的標籤名稱相等（標籤名稱唯一）

            if(obj.tab.innerHTML.trim() == this.tabs[i].tab.innerHTML.trim()){
                //dom中刪除對應tab
                this.innerTabZone.removeChild(this.tabs[i].tab);
                this.innerPageZone.removeChild(this.tabs[i].page);
               
                //tabs集合中刪除對應tab對象
                this.tabs.splice(i,1);
               
                //控制關閉tab後焦點行為
                if(i == 0 && this.tabs.length>0){
                    this.focus(this.tabs[i]);
                }
                else if(i > 0){
                    this.focus(this.tabs[i-1]);
                }
                return;
            }
        }

}

 

 

2.在架構中添加個方法

 

        //關閉指定的標籤頁面

       //tagName,要關閉的標籤名稱

       //要關閉的頁面
        function closeTab(tagName,src)
        {

            tabZone.closeTag(new TabPage(tagName,src,true));
        }

3.在實現關閉事件中調用架構的方法            

      parent.closeTab('tagName','url')