一个封装的QQ面板控件(HTC)

做.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 >

 预览qqbar.htm

下载：

qqbar.rar

http://tsoukw.cnblogs.com/archive/2006/05/19/404068.html