js封装tab选项卡--半完成，纯代码框架（原创）

最新推荐文章于 2022-09-22 13:09:44 发布

夜路人

最新推荐文章于 2022-09-22 13:09:44 发布

阅读量1.7k

点赞数 1

分类专栏：网页JS

本文链接：https://blog.csdn.net/wxljmy77/article/details/38310949

版权

网页JS 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<html>
<head>
<script>
//功能：实现tab框效果，能打开tab框，关闭tab框。
//...能防止重复打开，可以点击切换tab框，
//...各tab框对应有个iframe，加载内容运行独立
//...关闭tab框时显示剩余选项卡，焦点窗口不关闭
//...封装为类，在一个页面内多个tab框操作互不影响。
//...防止创建和删除tab选项卡的iframe，ie内存不释放问题。
//...兼容ie,firefox的问题。div的float，阻止firefox的事件冒泡等。
//参数：tabs框对应的div的id，head div的id ,body div的id
//...本类要对这3个div进行操作。
//...createdtab时，div的选项卡id不能以数字开头
function tabs(tid,thid,tbid)
{
    var _tid,_thid,_tbid; //本类要操作的tab div 的id.
    _tid=tid;
    _thid=thid;
    _tbid=tbid;
    //alert(_tid);
    var _focus_thid; //当前选中的选项卡head div 的id，关闭自己时，需要显示其他选项卡，否则，只关闭。
    //在某元素的onclick中如何使用该tabs类的实例对象???
    //就是通过这种方式!!!!!
    var _othis=this;
    //alert(_othis);
    //初始化,创建tabs的head中的table，替换div的float排列，兼容ie,firefox不好控制。
    var _tmptable=document.createElement('table');
    _tmptable.id=thid+'_table';
    //_tmptable.width='100%';
    _tmptable.style.border='solid 1px green';
    var _oth=document.getElementById(_thid);
    //alert(_oth);
    _oth.appendChild(_tmptable);

    var _tmptbody=document.createElement('tbody');
    _tmptable.appendChild(_tmptbody);

    var _tmprow=document.createElement('tr');
    _tmptbody.appendChild(_tmprow);

    //根据uid创建某个选项卡，如已创建过，则仅仅定位显示。
    //uid好像不能以数字开头
    this.createtab=function(uid,title,url)
    {

      var tabhead_id=uid + '_tab'+ '_head';
      var tabbody_id=uid + '_tab' + '_head_body';

      if(!this.tab_isloaded(tabhead_id))
      {
        //创建tab头部分
        var tabs_head_container=document.getElementById(_thid);
        var _tmptabhead=document.createElement('div');
        _tmptabhead.id=tabhead_id;
        _tmptabhead.parent=tabs_head_container;
        _tmptabhead.innerHTML="<table width='100%'><tr><td width='80%'>"
          + title + "</td><td align='right'><img id='btnclose' src='close.png' /></td></tr></table>";//title;
        //alert(_tmptabhead.innerHTML);
        //_tmptabhead.style.styleFloat='left'; //js用styleFloat属性，标签用float属性
        _tmptabhead.float='left';
        _tmptabhead.style.width='100px';
        _tmptabhead.style.border='solid 1px yellow';
        _tmptabhead.οnclick=function(){
          //!!!这里的this代表_tmptabhead对象，即head的div.所以this.id就是uid+_tab_head
          //!!!这里的_othis代表本tabs类的实例化对象。否则无法使用本类的函数tab_dispbody
          //alert(this.id);
          //alert('kkkk');
          _othis.tab_dispbody(this.id);
        };
        //注册close按钮。innerhtml赋值无法调用类函数removetab，必须动态添加事件
        var _tmpimgs=_tmptabhead.getElementsByTagName('img');
        for(var i=0;i<_tmpimgs.length;i++)
        {
          if(_tmpimgs[i].id=='btnclose')
          {
             //alert('注册选项卡关闭事件处理器成功!');
             _tmpimgs[i].οnclick=function(){
               //alert('oooooo');
               _othis.removetab(_tmptabhead.id);
               //!!!阻止事件冒泡，否则firefox中还会激发所在div的click事件。导致目标选项卡内容不显示。
               cancelBubble();
             }
          }
        }
        //添加选项卡到容器中，即div的table中，table为了横向排列，兼容ie，firefox;
        var _tmpcellx=document.createElement('td');
        _tmpcellx.width='100px';
        _tmpcellx.height='20px';
        _tmptabhead.parent=_tmpcellx;   //删除选项卡时要用，要删除td
        _tmpcellx.parent=_tmprow;
        _tmpcellx.appendChild(_tmptabhead);
        _tmprow.appendChild(_tmpcellx);
        //tabs_head_container.appendChild(_tmptabhead);
      }
      else
      {
         //alert('kjk');
         this.tab_dispbody(tabhead_id);
      }
      //创建tab内容部分div
      if(!this.tab_isloaded(tabbody_id))
      {
        var tabs_body_container=document.getElementById(_tbid);
        var _tmptabbody=document.createElement('div');
        _tmptabbody.id=tabbody_id;
        _tmptabbody.parent=tabs_body_container;

        //创建tab内容部分iframe
        var _tmpiframe=document.createElement('iframe');
        _tmpiframe.id=_tmptabbody.id+"_iframe";
        _tmpiframe.height='80%';
        _tmpiframe.width='90%';
        _tmpiframe.src=url;//'http://www.baidu.com';
        _tmptabbody.appendChild(_tmpiframe);
        //!!!注意添加的顺序，先子后总，否则可能释放不掉。
        tabs_body_container.appendChild(_tmptabbody);

        //隐藏其他的tab内容部分的div
        this.tab_dispbody(tabhead_id);
      }
      else
      {
        this.tab_dispbody(tabhead_id);
      }
    }

    //事件处理，选择tab头，显示对应的tab内容div
    this.tab_dispbody=function(tabhead_id)
    {
       //tab_headid参数：选中的tab头的div的id
       //alert('显示 ' + tabhead_id);
       //根据选中tab头的div id，显示对应的body div
       //选项卡头div命名：163_tab_head 内容div命名：163_tab_head_body
       //............................................................
       //选中tab头
       var tabs_head=document.getElementById(_thid);
       var _tmpth=tabs_head.getElementsByTagName('div');
       //alert(_tmpth.length);
       for(var i=0;i<_tmpth.length;i++)
       {
         try
         {
           //alert(_tmpth[i].id + "," + tabhead_id);
           //
           if(_tmpth[i].id==tabhead_id)
           {
             _tmpth[i].style.backgroundColor='red';
             //记忆当前选中的选项卡id 关闭时处理用。
             _focus_thid=_tmpth[i].id;
           }
           else
             _tmpth[i].style.backgroundColor='white';
         }catch(e){}
       }
       //选中tab头对应的body
       var tabs_body=document.getElementById(_tbid);
       var _tmptb=tabs_body.getElementsByTagName('div');
       //alert('所有tab body div的个数' + _tmptb.length);
       for(var i=0;i<_tmptb.length;i++)
       {
         try
         {
           //alert(_tmptb[i].id + "," + tabhead_id);
           //
           if(_tmptb[i].id==(tabhead_id+'_body'))
           {
             //alert('显示'+_tmptb[i].id );
             _tmptb[i].style.display='block';
           }
           else
           {
             //alert('关闭显示'+_tmptb[i].id );
             _tmptb[i].style.display='none';
           }
         }catch(e){}
       }
    }

    //关闭选项卡
    this.removetab=function(tabhead_id)
    {
      //alert('remove ' + tabhead_id);
      var tabs=document.getElementById(_tid); //!!tabs,不是tab_head
      //释放tab body部分iframe占用的资源，必须的，否则ie内存不释放
      var _iframes=tabs.getElementsByTagName('iframe');//=document.getElementById(tabhead_id+'_body_iframe');
      //alert(iframes.length);
      for(var i=0;i<_iframes.length;i++)
      {
        if(_iframes[i].id==tabhead_id+'_body_iframe')
          _iframes[i].src=null;
      }
      //删除tab选项卡对应的头和body部分的div
      //选项卡头div命名：163_tab_head 内容div命名：163_tab_head_body
      var _tmpdivs=tabs.getElementsByTagName('div');
      //alert(_tmpdivs.length);
      for(var i=0;i<_tmpdivs.length;i++)
      {
        try
        {
          if(_tmpdivs[i].id.indexOf(tabhead_id)>=0) //头内容
          {
            if(_tmpdivs[i].parent.tagName=="TD") //说明是tab头的head div
            {
              //删除div所在的td. 即tr.removechild(td);
              //alert(_tmpdivs[i].parent.parent.tagName);
              _tmpdivs[i].parent.parent.removeChild(_tmpdivs[i].parent);
            }
            else //说明是内容部分的div
            {
              //alert(_tmpdivs[i].id);
              _tmpdivs[i].parent.removeChild(_tmpdivs[i]);
            }
          }
        }catch(e){}
      }
      //如果删除的是当前焦点选项卡，则显示剩余的选项卡,否则，保持当前，不必显示
      if(tabhead_id==_focus_thid)
      {
        //选中剩余的选项卡中的某一个
        var tabs1=document.getElementById(_thid); //从tabs_head中找到头div的某一个即可
        var _tmpths=tabs1.getElementsByTagName('div');
        //alert(_tmpths.length);
        for(var i=0;i<_tmpths.length;i++)
        {
          try
          {
            var ilen=_tmpths[i].id.length;
            var tmpstr=_tmpths[i].id.substring(ilen-4,ilen);
            //alert(tmpstr);
            if(tmpstr=="head")
            {
              //alert('关闭选项卡后，自动选中：' + _tmpths[i].id);
              //try catch,防止本句出错，没有执行break，不跳出循环
              try{
                //newseltabhead=_tmpths[i];
                _focus_thid=_tmpths[i].id;
                _othis.tab_dispbody(_tmpths[i].id);
              }catch(e){}
              break;
            }

          }catch(e){}
        }
      }
    }

    //判断tab head或body是否已生成
    this.tab_isloaded=function(id)
    {
      var tabs_container=document.getElementById(_tid);
      var _divs=tabs_container.getElementsByTagName('div');
      for(var i=0;i<_divs.length;i++)
      {
        if(_divs[i].id==id)
          return true;
      }
      return false;
    }

//得到浏览器事件对象
function getEvent(){
     if(window.event)    {return window.event;}
     func=getEvent.caller;
     while(func!=null){
         var arg0=func.arguments[0];
         if(arg0){
             if((arg0.constructor==Event || arg0.constructor ==MouseEvent
                || arg0.constructor==KeyboardEvent)
                ||(typeof(arg0)=="object" && arg0.preventDefault
                && arg0.stopPropagation)){
                 return arg0;
             }
         }
         func=func.caller;
     }
     return null;
}
//阻止冒泡
function cancelBubble()
{
    var e=getEvent();
    if(window.event){
        //e.returnValue=false;//阻止自身行为
        e.cancelBubble=true;//阻止冒泡
     }else if(e.preventDefault){
        //e.preventDefault();//阻止自身行为
        e.stopPropagation();//阻止冒泡
     }
}
}

var otabs;
var xtabs;
window.οnlοad=function()
{
    otabs=new tabs('tabs','tabs_head','tabs_body');
    xtabs=new tabs('aa','aa_head','aa_body');
}
</script>
</head>

<body>
<input type="button" value="百度" οnclick="otabs.createtab('baidu','百度','1.htm');">
<input type="button" value="搜狐" οnclick="otabs.createtab('sohu','搜狐','2.htm');">
<input type="button" value="163" οnclick="otabs.createtab('s163','s163','3.htm');">
<input type="button" value="删除" οnclick="otabs.removetab('baidu_tab_head');">
  
<input type="button" value="百度" οnclick="xtabs.createtab('baidu','百度','1.htm');">
<input type="button" value="搜狐" οnclick="xtabs.createtab('sohu','搜狐','2.htm');">
<input type="button" value="163" οnclick="xtabs.createtab('s163','s163','3.htm');">
<input type="button" value="删除" οnclick="xtabs.removetab('baidu_tab_head');">

<div id="tabs">
    <div id="tabs_head" style='width:800px;height:20px;border:solid 1px red;'>
    </div>

    <div id="tabs_body"></div>

</div>


<div id="aa">
    <div id="aa_head" style='width:800px;height:20px;border:solid 1px red;'>
    </div>

    <div id="aa_body"></div>

</div>
</body>

</html>

夜路人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js封装tab选项卡--半完成，纯代码框架（原创）

//功能：实现tab框效果，能打开tab框，关闭tab框。 //...能防止重复打开，可以点击切换tab框， //...各tab框对应有个iframe，加载内容运行独立 //...关闭tab框时显示剩余选项卡，焦点窗口不关闭 //...封装为类，在一个页面内多个tab框操作互不影响。 //...防止创建和删除tab选项卡的iframe，ie内存不释放问题。 //
复制链接

扫一扫