十年磨一劍--從程序員到架構師

一个.net程序员,一个企业应用的开发者,喜欢系统架构,数据库,领域驱动,面向对象,表现层技术。关注重用的理论和实践。设计原则:简单,快速,适应变化能力强,表现层灵活多变...

博客园 首页 新随笔 联系 订阅 管理

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

posted on 2006-05-19 10:11  Kevin Zou  阅读(3158)  评论(10编辑  收藏  举报