使用Javascript实现ＱＱ面板

QQ面板，相关代码网上N多，我把JS简单封装了下，这样以后使用方便些。

简单的说下思路

我写的这个东西一共分为三个类，分别是外面的框架叫做QQPanel，可以点击的部分叫做QQItem，显示链接的部分叫做QQSubItem

显示的时候控制每个Item的Top属性，速度可以调节，其实就是用setTimeout来挪动Item的位置

好了，废话不多说了，看代码吧

 

js部分

2. var QQPANELIDPREFIX = "QQPanel_";
3. var QQPANELITEMIDPREFIX = "QQItem_";
4. var QQPANELSUBITEMIDPREFIX = "QQSubItem_";
5. var runtimes = 0;
7. window.QQPanels = [];
8. function QQPanel()
9. {
10.     this.id = window.QQPanels.length;
11.     window.QQPanels[this.id] = this;
12.     this.target = "_self";
13.     this.panelTop = 50;
14.     this.panelLeft = 50;
15.     this.panelWidth = 140;
16.     this.itemHeight = 20;
17.     this.subItemHeight = 400;
18.     this.speed = 1;//数字越大，动作越慢
19.     this.Items = [];
20. }
22. function QQItem(text)
23. {
24.     this.text = text;
25.     this.expand = false;
26.     this.subItems = [];
27. }
29. function QQSubItem(text,href)
30. {
31.     this.text = text;
32.     this.href = href;
33. }
35. //**********QQPanel prototype**********
36. QQPanel.prototype.addItem = function(qqitem) 
37. {
38.     var index = this.Items.length;
39.     qqitem.parent = this;
40.     qqitem.id = QQPANELIDPREFIX + this.id + "_" + QQPANELITEMIDPREFIX + index;
41.     qqitem.index = index;
42.     this.Items[index] = qqitem;
43. }
45. QQPanel.prototype.getHeight = function()
46. {
47.     return this.Items.length * this.itemHeight + this.subItemHeight;
48. }
50. QQPanel.prototype.toString = function()
51. {
52.     var html = "";
53.     html += "<span class=panelStyle style=/"left:"+this.panelLeft+"px;top:"+this.panelTop+"px;width:"+this.panelWidth+"px;height:"+this.getHeight()+"px;/">";
54.     for(var i = 0 ; i < this.Items.length ; i++)
55.     {
56.         var top = this.subItemHeight * i;
57.         html += "<div id="+this.Items[i].id+" style=/"LEFT: 0px; WIDTH: "+this.panelWidth+"px; POSITION: relative; TOP:-"+top+"px/"><TABLE cellSpacing=0 cellPadding=0 width=/"100%/"><TBODY>";
58.         html += this.Items[i];
59.         if(this.Items[i].subItems.length > 0)
60.         {
61.             html+="<TR><TD class=subItemStyle><div style=/"overflow:auto;height:"+this.subItemHeight+"px;/">";
62.             for(var q = 0;q<this.Items[i].subItems.length;q++)
63.             {
64.                 html += this.Items[i].subItems[q];
65.             }
66.             html+="</div></TD></TR>";
67.         }
68.         html+="</TBODY></TABLE></DIV>";
69.     }
70.     html += "</span>";
71.     html += "<script>window.QQPanels["+this.id+"].displayQQItem(0)</script>";//默认显示第一个
72.     return html;
73. }
75. QQPanel.prototype.displayQQItem = function(itemIndex)
76. {
77.     var offset = parseInt(this.subItemHeight / this.speed)
78.     var expandItem = this.findExpandQQItem();
79.     var expandIndex = this.Items.length - 1;
80.     if (expandItem != null)
81.     {
82.         expandIndex = expandItem.index;
83.     }
84.     if (itemIndex == expandIndex)
85.     {
86.         return;
87.     }
88.     
89.     if(itemIndex - expandIndex > 0)
90.     {
91.         offset = (-1) * offset;
92.         for(i = expandIndex + 1;i <= itemIndex;i++)
93.         {
94.             this.Items[i].move(offset);
95.         }
96.     }
97.     else
98.     { 
99.         for(i = expandIndex;i > itemIndex;i--)
100.         {
101.             this.Items[i].move(offset);
102.         }
103.     }
104.     runtimes++;
105.     if(runtimes >= this.speed)
106.     {
107.         this.Items[itemIndex].expand = true;
108.         this.Items[expandIndex].expand = false;
109.         runtimes = 0;
110.     }
111.     else
112.     {
113.         setTimeout("window.QQPanels["+this.id+"].displayQQItem(itemIndex)",10);
114.     }
115. }
117. QQPanel.prototype.findExpandQQItem = function()
118. {
119.     for(var i = 0 ; i < this.Items.length;i++)
120.     {
121.         if (this.Items[i].expand)
122.         {
123.             return this.Items[i];
124.         }
125.     }
126.     return null;
127. }
128. //**********QQPanel prototype**********
130. //**********QQItem prototype**********
131. QQItem.prototype.addSubItem = function(qqSubItem)
132. {
133.     qqSubItem.parent = this;
134.     qqSubItem.id = this.id + "_" + QQPANELSUBITEMIDPREFIX + this.subItems.length;
135.     qqSubItem.index = this.subItems.length;
136.     this.subItems[this.subItems.length] = qqSubItem;
137. }
139. QQItem.prototype.move = function(offset)
140. {
141.     var item = document.getElementById(this.id);
142.     item.style.top = parseInt(item.style.top) + offset;
143. }
145. QQItem.prototype.toString = function()
146. {
147.     var html = "<tr>";
148.     html += "<TD class=itemStyle οnclick=window.QQPanels["+this.parent.id+"].displayQQItem("+this.index+") height="+this.parent.itemHeight+"px>";
149.     html += this.text;
150.     html += "</TD>";
151.     html += "</TR>";
152.     return html;
153. }
154. //**********QQItem prototype**********
156. //**********QQSubItem prototype**********
157. QQSubItem.prototype.toString = function()
158. {
159.     var html = "";
160.     html += "<BR /><CENTER>";
161.     var href = "#";
162.     if (this.href != null && this.href.length > 0)
163.     {
164.         href = this.href;
165.     }
166.     html += "<a href=/""+href+"/" target=/""+this.parent.parent.target+"/">"+this.text+"</a>";
167.     html += "</CENTER>";
168.     return html;
169. }
170. //**********QQSubItem prototype**********

css部分

1. .panelStyle
2. {
3.     position:absolute;overflow:hidden;border:1px solid #008800;
4. }
5. .itemStyle
6. {
7.     background-color:#6699CC;color:#ffffff;
8.     border-top:1px solid #FFFFFF;font-size:9pt;cursor:pointer;
9.     text-align:center;
10. }
12. .subItemStyle
13. {
14.     background-color:#efefef;color:blue;font-size:9pt;
15. }

使用起来很方便，测试HTML如下

1. <HEAD>
2. <link href="QQPanel.css" type="text/css" rel="stylesheet"/>
3. <script type="text/javascript" src="QQPanel.js"></script>
4. </HEAD>
5. <body>
6. <script language="javascript" type="text/javascript">
7. var qq = new QQPanel();
8. for(var i = 0 ; i < 10;i++)
9. {
10.     var item = new QQItem("item"+i,null);
11.     item.addSubItem(new QQSubItem("subitem1"),null);
12.     item.addSubItem(new QQSubItem("subitem2"),null);
13.     item.addSubItem(new QQSubItem("subitem3"),null);
14.     item.addSubItem(new QQSubItem("subitem4"),null);
15.     qq.addItem(item);
16. }
17. document.write(qq);
18. </script>
19. </body>

以上代码在IE6+FF3测试通过~~~~

 

欢迎转载，请注明出处~~