关闭

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

756人阅读 评论(0) 收藏 举报

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


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

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2257865次
    • 积分:25815
    • 等级:
    • 排名:第228名
    • 原创:1篇
    • 转载:1662篇
    • 译文:0篇
    • 评论:98条
    最新评论