各位新年好!请问题如何做出windows帮助中左边那个选项卡的的两个按钮的效果？

<html>
<head>
<title>插入表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<body bgcolor=buttonface scroll=no topmargin=5>
<style type="text/css">
div,td{cursor:default;font-family:宋体;font-size:9pt;}
</style>
<script language=javascript>
function TableOK(){
var dotable,tmpcol,tmprow,docol,dorow
if(tba[0].checked){algn="left";}
if(tba[1].checked){algn="center";}
if(tba[2].checked){algn="right";}
tmpcol="<td align="+algn+"></td>";
docol=""
dorow=""
for ( var i=0; i<tbc.value; i++ ){
docol=docol+tmpcol;
}
docol="<tr>"+docol+"</tr>"
for ( var j=0; j<tbr.value; j++ ){
dorow=dorow+docol;
}
dotable="<table border="+tbb.value+" cellspacing="+tbs.value+" cellpadding="+tbp.value+">"+dorow+"</table>"
alert(dotable);
}
</script>
<script language=VBScript>
Sub TabStrip_Change()
if (TabStrip.Value = 0) then
Page1.style.visibility = "hidden"
Page0.style.visibility = "visible"
end if
if (TabStrip.Value = 1) then
Page0.style.visibility = "hidden"
Page1.style.visibility = "visible"
end if
end sub
</script><center>
<object id="TabStrip" classid="clsid:eae50eb0-4a62-11ce-bed6-00aa00611080" style="WIDTH: 285px; HEIGHT: 150px" >
<param name="ListIndex" value="0">
<param name="NewVersion" value="-1">
<param name="Accelerator" value="&A;B;">
<param name="TipStrings" value="这是一般设定;这是高级设定;">
<param name="FontName" value="宋体">
<param name="Items" value="一般设定;高级设定;">
</object>
<div id="Page0" style="visibility:visible;position:absolute;left:expression((TabStrip.offsetLeft + 6) + 'px');top:expression((TabStrip.offsetTop + 30) + 'px');width:280px;height:200px;text-align:left;">
<table border=0 cellpadding=0 cellspacing=2>
<tr><td>边框粗细：</td><td><input type=text name=tbb size=20 value="1" maxlength=2 onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" class=hole></td><td>px</td></tr>
<tr><td>表格行数：</td><td><input type=text name=tbc size=20 value="2" maxlength=2 onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" class=hole></td><td>行</td></tr>
<tr><td>表格列数：</td><td><input type=text name=tbr size=20 value="2" maxlength=2 onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" class=hole></td><td>列</td></tr>
</table>
</div>
<div id="Page1" style="visibility:hidden;position:absolute;left:expression((TabStrip.offsetLeft + 6) + 'px');top:expression((TabStrip.offsetTop + 30) + 'px');width:280px;height:200px;text-align:left;">
<table border=0 cellpadding=0 cellspacing=2>
<tr><td>边框间距：</td><td><input type=text name=tbs size=16 maxlength=2 value="2" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" class=hole></td><td width=85>px</td></tr>
<tr><td>边距大小：</td><td><input type=text name=tbp size=16 maxlength=2 value="2" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" class=hole></td><td>px</td></tr>
<tr><td>对齐方式：</td><td colspan=2><input type=radio name=tba checked>左<input type=radio name=tba>中<input type=radio name=tba>右</td></tr>
</table>
</div>
<div align="center" style="position:absolute;left:expression((TabStrip.offsetLeft + 6) + 'px');top:expression((TabStrip.offsetTop + TabStrip.style.posHeight - 30) + 'px');width:280px;height:80px;" align="center">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=50 align=center><input type=button onclick="window.close();" value="取消" class=cmdbtn></td>
<td width=50 align=center><input type=button onclick="TableOK();" value="完成" class=cmdbtn></td>
</tr></table>
</div>
</center>
<script>
window.setTimeout('TabStrip.blur()',100);
</script>
<div style="width:100%;padding:10px" align="center">
<object id="menutabs" name="menutabs" classid="clsid:EAE50EB0-4A62-11CE-BED6-00AA00611080" align="baseline" border="0"
    width="533"
    height="313">
    <param name="ListIndex" value="0">
    <param name="ForeColor" value="4210816">
    <param name="Size" value="14111;8290">
    <param name="Items" value="Main;Links;Topics;Help;">
    <param name="TabOrientation" value="2">
    <param name="MultiRow" value="-1">
    <param name="TipStrings" value="8888;;;;">
    <param name="Names" value="Main;Links;Topics;Help;">
    <param name="NewVersion" value="-1">
    <param name="TabsAllocated" value="4">
    <param name="Tags" value=";;;;">
    <param name="TabData" value="4">
    <param name="Accelerator" value=";;;;">
    <param name="FontName" value="Arial">
    <param name="FontEffects" value="1073741825">
    <param name="FontCharSet" value="0">
    <param name="FontPitchAndFamily" value="2">
    <param name="FontWeight" value="700">
    <param name="TabState" value="3;3;3;3">
</object>
</div>
</body>
</html> 

解决方案 »

  1.   

    孟兄能否提供这些组件在web上使用的帮助文档呢?
      

  2.   

    给你一些，代码片断
    自己写吧
    （写一个好的纯JavaScript的Tab不容易，努力吧！） this.m_oLeftScrollButton = this._createScrollButton(0);
    this.m_oRightScrollButton = this._createScrollButton(1); function _createScrollButton(nIndex)
    {
    var oButton = this.body.document.createElement("BUTTON"); oButton.style.position = "absolute";
    oButton.style.pixelLeft = this.body.offsetWidth - myTab.SCROLLBUTTON_WIDTH * (2 - nIndex);
    oButton.style.pixelTop = 0;
    oButton.style.pixelWidth = myTab.SCROLLBUTTON_WIDTH;
    oButton.style.pixelHeight = myTab.SCROLLBUTTON_HEIGHT;
    oButton.style.backgroundRepeat = "no-repeat";
    oButton.style.backgroundPositionX = (nIndex == 0 ? "center" : "left");
    oButton.style.backgroundPositionY = "top";
    oButton.style.visibility = "hidden";
    oButton.style.zIndex = myTab.ZINDEX_SRCOLLBUTTON; oButton.style.backgroundImage = (nIndex == 0 ? "url(" + myDefs.DIR_IMAGE + "arrow_prev.gif)" : "url(" + myDefs.DIR_IMAGE + "arrow_next.gif)");
    oButton.onclick = this.window.eval("new Function('" + this.uid + '._onScrollTab(' + nIndex + ", true)')"); this.body.insertAdjacentElement("beforeEnd", oButton); return oButton;
    } function _showScrollButtons(bShow)
    {
    var bRet = false
    try
    {
    this.m_oLeftScrollButton.style.pixelLeft = this.body.offsetWidth - myTab.SCROLLBUTTON_WIDTH * 2;
    this.m_oRightScrollButton.style.pixelLeft = this.body.offsetWidth - myTab.SCROLLBUTTON_WIDTH; this.m_oLeftScrollButton.style.visibility = (bShow && this.m_nFirstShowedIndex != 0 ? "visible" : "hidden");
    this.m_oRightScrollButton.style.visibility = (bShow && this.m_nFirstShowedIndex != this.m_aoTabPages.length - 1 ? "visible" : "hidden");
    bRet = true;
    }
    catch(e){this.notifyErr(e);}
    return bRet;
    }
    function _redraw()
    {
    //....
    this._showScrollButtons(bShowScrollButtons);
    //.... }