一个封装的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" />

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

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

一个封装的QQ面板控件相关推荐

Qt 封装一个简单的LED(指示灯)控件
Qt 封装一个简单的LED(指示灯)控件 1,效果~ 所以这个简单的LED类可以自定义大小~ 可以点亮或熄灭,也可以闪烁
Qt使用C++封装qml自定义图形控件（QQuickPaintedItem）
C++封装qml自定义图形控件 QtWidget.qml简介通过继承QQuickPaintedItem封装控件描述公用接口定义代码示例效果图 QtWidget.qml简介 Qt提供了2套UI ...
React 组件封装之 Tree 树形控件
React 组件封装之 Tree 树形控件一.Tree 树形结构二.使用案例三.API 使用指南四.源代码五.总结一.Tree 树形结构组件说明: 实现树形控件,适用于组织架构.文章列表 ...
C# 高仿腾讯QQ (TextBox控件美化)(附源码)
接上一篇<C# 高仿腾讯QQ (Bottom控件美化) > 这篇来说一下QQ皮肤TextBox控件的美化: (1)．已修正每次窗口最小化以后再还原会发现窗口底部往下移了几十个像素(但还不 ...
LabVIEW前面板控件
输入控件的端口边框比显示控件的端口边框粗,而且输入控件的接线端在右侧,显示控件的接线端在左侧,附有数据流方向箭头. 控制件和显示件放在前面板后可以相互转换:在控件或它的端口的快捷菜单中选择转换为显示/ ...
Delphi类似QQ皮肤控件，欢迎试用！
实现的QQ皮肤控件的一个试用版(目前支持D7,D2007和D2010版)!欢迎下载
ST_Curve --- 一个专业的曲线绘制控件
一:什么是ST_Curve? ST_Curve是一个专业的曲线绘制控件,只要是xy坐标系的曲线,都可绘制,纵坐标只能显示为值,横坐标可以显示为值或者时间(如果你愿意为控件提供插件,则坐标可显示任意 ...
[共享]一个文件上传的控件，绝对是精品源码
[共享]一个文件上传的控件,绝对是精品源码前段时候在www.codeproject.com上看到一个文件上传的控件,觉得很好,共享给园子里的朋友. 原文链接:http://www.codeproje ...
Windows下一个可与其他数据集控件结合的通用的搜索框GUSIconEdit
当初在两年多前开始做现在这个项目时,我们最初决定花长时间来升级现有的游戏引擎,包括服务器和客户端,我负责了一部分的客户端的功能升级和配套工具集的开发和升级,我们这套引擎的工具集包含工具比较多,每个工具 ...

一个封装的QQ面板控件

一个封装的QQ面板控件相关推荐

最新文章

热门文章