崔永元范冰冰视频,假肢美女视频,看香蕉美女视频一时爽一直看一直爽

Web頁面中選項卡Tabview的實現(xiàn)

2008.09.28

Web頁面中TabView的作用

TabView是許多可視化編程環(huán)境提供的常見組件,它通過選項卡將內(nèi)容分類,因此能在緊湊的空間內(nèi)顯示眾多內(nèi)容,這個特點使得它在可視化編程環(huán)境中很常見.
隨著Web的發(fā)展,Web頁面元素也開始了組件化的歷程,TabView也不例外.對此Extjs的組件最值得稱道,只是似乎需要一定的時間來鉆研.
本人閑暇之余也實現(xiàn)了自己的TabView,目前在IE下運行正常和FireFox均運行正常,這里貼出來希望和大家一起探討.

實現(xiàn)效果一:

1.將TabView分為菜單和內(nèi)容兩個部分

Tabview,顧名思義,就是一個tab加上一個view,tab用無序列表構造的菜單來實現(xiàn),view則用div來實現(xiàn)即可.在Web中這樣設計實現(xiàn)Tabview比較快捷,如果象可視化編程環(huán)境那樣用動態(tài)隱藏和顯示每個tab對應的view則耗時比較長,有些得不償失.
接下來的工作就簡單了,將菜單部分放在一個DIV tabsHeader中,將內(nèi)容部分放在一個DIV tabsBody中,再把它們放在擁有上下兩個單元格的table中實現(xiàn)上下相接的效果,這樣做在ie里和firfox中都能正常表現(xiàn),如果采用div的話不好設置,容易出現(xiàn)上下交錯或是隔離的效果.
頁面代碼如下:

<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>定時取隨機數(shù)</span></a></li>

</ul>

</div>

</td></tr>

<p>點擊每個選項卡</p>

<p>程序?qū)⑹褂肁jax從服務器端獲得新數(shù)據(jù)并顯示在內(nèi)容中</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.點擊選項卡更換內(nèi)容的處理

在可視化編程環(huán)境中點擊選項卡是切換view,在web要這樣實現(xiàn)不是不可以,只是有點費力不討好,其實直接把tabsBody DIV的innerHTML更換掉就實現(xiàn)了view切換的效果.
更換tabsBody DIV的innerHTML需要Ajax的幫助,更換內(nèi)容的示例代碼如下:

更換內(nèi)容的示例代碼

// 取得返回文字

var subInnerHTML=ajaxObj.responseXML.getElementsByTagName("content")[0].xml;

// 給選項頁設置文字

var tabsBodyDiv=document.getElementById("tabsBody");

tabsBodyDiv.innerHTML=subInnerHTML;

3.當前項的切換

Tabview還有一個視覺上的功能是突出顯示當前選項卡,這個我們可以通過JS修改菜單的class來實現(xiàn).
菜單的代碼如下:

Tabview還有一個視覺上的功能是突出顯示當前選項卡,這個我們可以通過JS動態(tài)修改菜單的class來實現(xiàn).

菜單的代碼如下:

<ul>