一个封装的QQ面板控件（HTC）

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

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>

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>

<option value="-1">请选择一个面板</option>

</select>

</tr>

<tr>

</td>

</tr>

</tr>

<tr>

<td>

</td>

</tr>

</tr>

<tr>

<td>

</td>

</tr>

</tr>

<tr>

<td>

</td>

</tr>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

</body>

</html>

预览
qqbar.htm

下载：

qqbar.rar

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

Feedback

#1楼 2006-05-19 13:44 GouGou

有意思～下下来玩玩～
　回复　引用　查看　

#2楼 2006-05-19 17:48 毛毛

收到了！
　回复　引用　查看　

#3楼 2006-05-19 19:21 xiao_p

不错不错
　回复　引用　查看　

#4楼 2006-05-19 20:08 fxing[未注册用户]

looks cool...it can be better if it can support xml dynamically.

　回复　引用　

#5楼 [楼主] 2006-05-19 20:48 小生

@fxing
动态支持xml，应该也比较容易吧，在htc内加入init事件来解析xml并生成测试文件内的那个table就可以了吧（或者你是其它意思？）

不过这个qq bar我一般是用来做系统菜单或web上的即时通讯工具上（模仿qq)
其中的内容基本上都是死的，所以没有做成动态的（如增加一个面板等）
　回复　引用　查看　