Web页面中选项卡Tabview的实现

Web页面中TabView的作用

TabView是许多可视化编程环境提供的常见组件,它通过选项卡将内容分类,因此能在紧凑的空间内显示众多内容,这个特点使得它在可视化编程环境中很常见.
随着Web的发展,Web页面元素也开始了组件化的历程,TabView也不例外.对此Extjs的组件最值得称道,只是似乎需要一定的时间来钻研.
本人闲暇之余也实现了自己的TabView,目前在IE下运行正常和FireFox均运行正常,这里贴出来希望和大家一起探讨.

实现效果一:

1.将TabView分为菜单和内容两个部分

Tabview,顾名思义,就是一个tab加上一个view,tab用无序列表构造的菜单来实现,view则用div来实现即可.在Web中这样设计实现Tabview比较快捷,如果象可视化编程环境那样用动态隐藏和显示每个tab对应的view则耗时比较长,有些得不偿失.
接下来的工作就简单了,将菜单部分放在一个DIV tabsHeader中,将内容部分放在一个DIV tabsBody中,再把它们放在拥有上下两个单元格的table中实现上下相接的效果,这样做在ie里和firfox中都能正常表现,如果采用div的话不好设置,容易出现上下交错或是隔离的效果.
页面代码如下:

<!-- 选项卡代码开始 -->
<table border=0 cellspacing="0" cellpadding="0" height="100%" width="100%">
  <tr height="20"><td  width="100%">
   <div id="tabsHeader">
      <ul>
        <li><a href='javascript:changeTab("date")' id="date"><span>定时取日期</span></a></li>
        <li><a href='javascript:changeTab("time")' id="time" class="current"><span class="current">定时取日期时间</span></a></li>
        <li><a href='javascript:changeTab("random")' id="random"><span>定时取随机数</span></a></li>
      </ul>
    </div>
  </td></tr>
  <tr height="98%" valign="top"><td  width="100%">
    <div id="tabsBody">
      <p>点击每个选项卡</p>
      <p>程序将使用Ajax从服务器端获得新数据并显示在内容中</p>
      <p></p>
      <p></p>
      <p></p>
    </div>
  </td></tr>
</table>
<!-- 选项卡代码结束 -->

 tabsHeader的CSS定义

#tabsHeader {}{
  width:460px;
  height:100%;
  font-size:93%;  
  line-height:normal;
}
#tabsHeader ul {}{
  margin:0;
  padding:0px;
  list-style:none;
}
#tabsHeader li {}{
   display:inline;
   margin:0;
   padding:0;
}
#tabsHeader a {}{
   float:left;
   background:url("tableft10.gif") no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#tabsHeader a.current {}{
   float:left;
   background:url("tableft10.gif") no-repeat left top;
   background-position:0% -42px;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#tabsHeader a span {}{
   float:left;
   display:block;
   background:url("tabright10.gif") no-repeat right top;
   padding:5px 15px 4px 6px;
   color:#FFF;
}
#tabsHeader a span.current {}{
   float:left;
   display:block;
   background:url("tabright10.gif") no-repeat right top;
   background-position:100% -42px;
   padding:5px 15px 4px 6px;
   color:#FFF;
}
/**//* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsHeader a span {}{
  float:none;
}
/**//* End IE5-Mac hack */
#tabsHeader a:hover span {}{
   color:#FFF;
}

.current {}{
   background-color:#F6F6F6;
}

tabsBody的CSS定义

#tabsBody{}{
  width:460px;
  height:92%;
  padding:10px;
  border-left:1px solid #2763A5;
  border-right:1px solid #2763A5;
  border-top:1px solid #2763A5;
  border-bottom:1px solid #2763A5;
}

 2.点击选项卡更换内容的处理

在可视化编程环境中点击选项卡是切换view,在web要这样实现不是不可以,只是有点费力不讨好,其实直接把tabsBody DIV的innerHTML更换掉就实现了view切换的效果.
更换tabsBody DIV的innerHTML需要Ajax的帮助,更换内容的示例代码如下:

更换内容的示例代码

// 取得返回文字
var subInnerHTML=ajaxObj.responseXML.getElementsByTagName("content")[0].xml;

// 给选项页设置文字
var tabsBodyDiv=document.getElementById("tabsBody");
tabsBodyDiv.innerHTML=subInnerHTML;

3.当前项的切换

Tabview还有一个视觉上的功能是突出显示当前选项卡,这个我们可以通过JS修改菜单的class来实现.
菜单的代码如下:

Tabview还有一个视觉上的功能是突出显示当前选项卡,这个我们可以通过JS动态修改菜单的class来实现.
菜单的代码如下:
<div id="tabsHeader">
  <ul>
    <li><a href='javascript:changeTab("date")' id="date"><span>定时取日期</span></a></li>
    <li><a href='javascript:changeTab("time")' id="time" class="current"><span class="current">定时取日期时间</span></a></li>
    <li><a href='javascript:changeTab("random")' id="random"><span>定时取随机数</span></a></li>
  </ul>
</div>

点击菜单项后,突出当前项的代码如下,它的思路是先重置所有菜单项,再突出当前菜单项.最后进行Ajax调用更新View中的innerHtml.

function changeTab(id){
  var tabs10Div=document.getElementById("tabsHeader");
  
  // 将所有链接标签重置
  var linkNodes=tabs10Div.getElementsByTagName("a");
  for(var i=0;i<linkNodes.length;i++){
    linkNodes[i].className="";
  }
  // 将所有Span标签重置
  var spanNodes=tabs10Div.getElementsByTagName("span");
  for(var i=0;i<spanNodes.length;i++){
    spanNodes[i].className="";
  }
  // 将当前选择的链接置深
  var currentLink=document.getElementById(id);
  currentLink.className="current";
  
  // 将当前选择的Span置深
  var currentSpan=currentLink.getElementsByTagName("span")[0];
  currentSpan.className="current";
    
  ajaxObj=createAjaxObject(); 
  var url=prjName+"FetchText?id="+id; 
  // alert(ajaxObj);
  ajaxObj.open("Get",url,true);
  ajaxObj.onreadyStateChange=changeTabCallBack;
  ajaxObj.send(null); 
}

代码下载:
http://www./Files/sitinspring/TabView20080506114949.zip