QQ客服列表

公司的客服列表，效果图如下：

 

代码就只贴JQUERY部分的，附件里有完整代码

 

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style type="text/css">
#idczy_kefu img{
	border:0 ;
}
#idczy_kefu div{
	padding:0;
	text-align:center;
}
#idczy_kefu ul{
	list-style:none ;
	margin:0;
}
#idczy_kefu td{
	font-size:12px;
	text-align:center;
}
</style>

<div id="idczy_kefu" style="width:173px;"> 
 <div><img src="images/kefu_top.gif" /></div>
 <div style="background-image:url(images/kefu_body.gif); background-repeat:no-repeat;">
<table> 
<tr>
	<td>销售客服</td>
</tr>
<tr>
	<td>
		<div id="qq1"><ul></ul></div>
		<div style="color:red;"><a href= "msnim:chat?contact=[e-mail]" title="点击与我们交谈！"><img src="images/msn.gif" /></a></div>	
	</td>
</tr>
<tr>
	<td>技术支持</td>
</tr>
<tr>
	<td>
		<div id="qq2"><ul></ul></div>
	</td>
</tr>
<tr>
	<td>代理加盟</td>
</tr>
<tr>
	<td>
		<div id="qq3"><ul></ul></div>
		<div style="color:red;">
		<a href= "msnim:chat?contact=[e-mail]" title="点击与我们交谈！"><img src="images/msn.gif" /></a></div>	
	</td>
</tr>
<tr><td>&nbsp;</td></tr>
</table>
</div>
<script type="text/javascript">
function QQ(id,nicker){
	this.id = id ;
	this.nicker = nicker ;
}
var arr_qq1 = [new QQ(372815651,"客服01"),
				new QQ(617672478,"客服02"),
				new QQ(136318290,"客服03"),
				new QQ(345926131,"客服04"),
				new QQ(549175802,"客服05"),
				new QQ(279105882,"客服06")] ;
var arr_qq2 = [new QQ(327557880,"兆恒技术(白)"),
				new QQ(498381623,"兆恒技术(夜)")] ;
var arr_qq3 = [new QQ(83997778 ,"代理加盟01"),
				new QQ(512108999,"代理加盟02")] ;
var site_name="香港主机|香港服务器|香港服务器租用|美国虚拟主机|海外域名注册|海外企业邮箱" ;

$(arr_qq1).each(function(i){
	$("#qq1 ul").append("<li><a href='tencent://message/?uin="+arr_qq1[i].id+"&amp;Site="+site_name+"&amp;Menu=yes'><img src='http://wpa.qq.com/pa?p=1:"+arr_qq1[i].id+":7'alt='点击与"+arr_qq1[i].nicker+"交谈' /></a></li>");
});
$(arr_qq2).each(function(i){
	$("#qq2 ul").append("<li><a href='tencent://message/?uin="+arr_qq2[i].id+"&amp;Site="+site_name+"&amp;Menu=yes'><img src='http://wpa.qq.com/pa?p=1:"+arr_qq2[i].id+":7'alt='点击与"+arr_qq2[i].nicker+"交谈' /></a></li>");
});
$(arr_qq3).each(function(i){
	$("#qq3 ul").append("<li><a href='tencent://message/?uin="+arr_qq3[i].id+"&amp;Site="+site_name+"&amp;Menu=yes'><img src='http://wpa.qq.com/pa?p=1:"+arr_qq3[i].id+":7'alt='点击与"+arr_qq3[i].nicker+"交谈' /></a></li>");
});
</script>
</div>
</div>

 

评论

10 楼 kaig 2009-10-22  

whaosoft 写道

虽然不算什么技术 但页面挺好看~ 不对 好像都差不多 那长相

本来想全部用JQuery写的，但老板催得紧，没办法用了TABLE,其实我个人现在很不想用TABLE，因为现在能满足W2C标准的基本都用DIV+UL+LI，后期我还会更新的！

9 楼 raisun_1988 2009-10-21  

谢谢 LZ 的分享。

8 楼 incredible 2009-10-21  

我觉得很丑，有山寨的感觉

7 楼 wangguanqiu 2009-10-20  

可以当做一个tab选项卡使用

6 楼 polokang 2009-10-19  

样式还不错！

5 楼 csbison 2009-10-19  

正想找这个文章，多谢了！

4 楼 zhaolaiwei 2009-10-19  

不错，收藏了，楼主辛苦！

3 楼 turionboy 2009-10-18  

看起来不错，楼主辛苦了。

2 楼 leiwuluan 2009-10-18  

界面不错。。收了。顶。。

1 楼 whaosoft 2009-10-16  

虽然不算什么技术 但页面挺好看~ 不对 好像都差不多 那长相