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

最新推荐文章于 2024-07-23 20:34:33 发布

JOHNCOOLS

最新推荐文章于 2024-07-23 20:34:33 发布

阅读量916

点赞数

分类专栏： HTML JS 网页设计学习与技巧文章标签： htc qq function class null div

HTML JS 网页设计学习与技巧专栏收录该内容

178 篇文章 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 >