做.net的web开发几年了，只记得第一个project时用的是asp.net自带的服务器端控件(如datagrid等)，而后就完全放弃了服务器端控件的做法，而是采用客户端控件加ajax，实现客户端完全无刷新来做的。因自己做的是企业开发，客户端固定在了IE平台之上，因此选择了htc作为客户端控件的封装，把我写的几个已经封装好的控件共享给大家，希望大家提出自己的看法和意见。
<!--Date: 2006/2/15Author: zkwContent:qq面板控件--><public:attach event=oncontentready onevent="init()" /><public:attach event=onclick onevent="clickit()" /><!--选择某个面板的方法--><public:method name="SwitchTab" INTERNALNAME="m_switchTab" /><!--面板完全显示之后的事件--> <PUBLIC:EVENT ID="evtshowok" NAME="onshowok"/><!--面板单击后的事件--> <PUBLIC:EVENT ID="evtshowbefore" NAME="onshowbefore"/><!--当前选择的行索引--><public:property name="SelectedIndex" get="getIndex" />
<script language="javascript">
var curtitle = null; //当前标题行var clicktr = null; //正在单击的行var stat = 0;
function getIndex(){
if(curtitle!=null) return curtitle.rowIndex; return -1;
} function init(){ if(element.tagName!="TABLE") return; element.cellSpacing = "0"; element.cellPadding = "0"; var j=0; var curshow =0; if(element.shownum)curshow = element.shownum; //shownum(attribute):默认显示第几个面板（从0开始） for(var i=0;i<element.rows.length;i++){ var row = element.rows[i]; if(row.istitle=="1"){ if(j++==curshow){ curtitle = element.rows[i]; } else{ element.rows[i+1].style.display = "none"; element.rows[i+1].cells[0].style.height = "0%"; element.rows[i+1].cells[0].children[0].style.visibility = "hidden"; //内容面板中有个要求，即它里面的td中必须只有一个子元素（即其所有内容都是在这个子元素之中） element.rows[i+1].cells[0].children[0].style.overflow = "hidden"; } } }}function getRow(inrowobj){ tmp = inrowobj; while(tmp!=null&&tmp.tagName.toLowerCase()!="tr"){ tmp = tmp.parentElement; } return tmp==null?null:(tmp.istitle=="1"?tmp:null);}function clickit(){ var src = window.event.srcElement; var tr = getRow(src); if(tr!=null){ if(tr!=curtitle&&clicktr==null){ //clicktr==null:当前没有行在单击 tr.nextSibling.style.display = ""; clicktr = tr; stat = 0; try { var evt = createEventObject(); evt.src = curtitle; evt.to = clicktr; evtshowbefore.fire(evt); } catch(e) {}; smoothout(); } }}function m_switchTab(index){ if(curtitle.rowIndex!=index) element.rows[index].click();}function smoothout(){ if(clicktr==null)return; stat = stat + 15; if(stat<100){ clicktr.nextSibling.cells[0].style.height = (stat) + "%"; curtitle.nextSibling.cells[0].style.height = (100-stat) + "%"; window.setTimeout(smoothout,20); } else{ curtitle.nextSibling.style.display = "none"; curtitle.nextSibling.cells[0].style.height = "0%"; curtitle.nextSibling.cells[0].children[0].style.visibility = "hidden"; curtitle.nextSibling.cells[0].children[0].style.overflow = "hidden"; clicktr.nextSibling.style.display = ""; clicktr.nextSibling.cells[0].style.height = "100%"; clicktr.nextSibling.cells[0].children[0].style.visibility = "visible"; clicktr.nextSibling.cells[0].children[0].style.overflow = "auto"; try { var evt = createEventObject(); evt.src = curtitle; evt.to = clicktr; evtshowok.fire(evt); } catch(e) {}; curtitle = clicktr; clicktr = null; }
}</script><html> <head> <title>qq面板测试</title> <style> .title { overflow:hidden; font-size:9pt; text-align:center; background-color:#f7f7f7; color:black; cursor:default; height:20px; border-width:1px; border-style:solid; border-color:white black black white } .seltitle { overflow:hidden; font-size:9pt; font-weight:bold; text-align:center; background-color:#316ac5; color:white; cursor:default; height:20px; border-width:1px; border-style:solid; border-color:white black black white } </style> <script language="javascript"> function chg(osel){ var v = osel.options[osel.selectedIndex].value if(v!="-1"){ document.all["qqbar"].SwitchTab(v); } } function clicktab(){ var src = window.event.src; var to = window.event.to; //debugger; src.cells[0].className = "title"; to.cells[0].className = "seltitle"; } </script> </head> <body> <input type="button" value="当前显示的行标题索引" onclick="alert('当前选择的行索引 ：' + document.all['qqbar'].SelectedIndex)"> <select onchange="chg(this)"> <option value="-1">请选择一个面板</option> <option value="0">面板1</option> <option value="2">面板2</option> <option value="4">面板3</option> <option value="6">面板4</option> <option value="8">面板5</option> </select> <div style="width:130px;height:450px;overflow:hidden"> <table id="qqbar" shownum="2" onshowbefore="clicktab()" onshowok="window.status ='当前选择的行标题：' + (window.event.to.innerText)" style="background:#e3e3e3;width:100%;height:420px;border:1px solid black;behavior:url(qqbar.htc)"> <tr istitle="1"> <td class="title">第1个标题栏</td> </tr> <tr> <td class="td"> <div class="content">内容1</div> </td> </tr> <tr istitle="1"> <td class="title">第2个标题栏</td> </tr> <tr> <td> <div class="content">内容2</div> </td> </tr> <tr istitle="1"> <td class="seltitle">第3个标题栏</td> </tr> <tr> <td> <div class="content">内容3</div> </td> </tr> <tr istitle="1"> <td class="title">第4个标题栏</td> </tr> <tr> <td> <div class="content">内容4</div> </td> </tr> <tr istitle="1"> <td class="title">第5个标题栏</td> </tr> <tr> <td> <div class="content">内容5</div> </td> </tr> </table> </div> </body></html>下载：