一个封装的QQ面板控件

做.net的web开发几年了，只记得第一个project时用的是asp.net自带的服务器端控件(如datagrid等)，而后就完全放弃了服务器端控件的做法，而是采用客户端控件加ajax，实现客户端完全无刷新来做的。因自己做的是企业开发，客户端固定在了IE平台之上，因此选择了htc作为客户端控件的封装，把我写的几个已经封装好的控件共享给大家，希望大家提出自己的看法和意见。

<!--
Date:    2006/2/15
Author:    zkw
Content: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

转载于:https://www.cnblogs.com/cheatlove/articles/405420.html