动态添加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添加Tab
TabZone.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及page
this.innerTabZone.appendChild(obj.tab);
this.innerPageZone.appendChild(obj.page);
this.focus(obj);
}
//关闭所有未保护的TabPage
TabZone.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]);
}
}
//隐藏除了指定参数的tab
TabZone.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;
//tab
this.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;
 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;
 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;
 100%;
height: 100%;
z-index: 0;
margin-top: 3px;
}
.TabZone div div
{
height: 100%;
 100%;
}
.TabZone div div iframe
{
position: relative;
 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')