浏览 16217 次
|
锁定老帖子 主题：QQ客服列表
精华帖 (0) :: 良好帖 (0) :: 新手帖 (3) :: 隐藏帖 (1)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-10-15
公司的客服列表，效果图如下：
代码就只贴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=idczy@msn.com" 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=idczy@hotmail.com" title="点击与我们交谈！"><img src="images/msn.gif" /></a></div>
</td>
</tr>
<tr><td> </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+"&Site="+site_name+"&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+"&Site="+site_name+"&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+"&Site="+site_name+"&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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-10-16
虽然不算什么技术 但页面挺好看~ 不对 好像都差不多 那长相
|
| 返回顶楼 | |
|
发表时间：2009-10-18
看起来不错，楼主辛苦了。
|
| 返回顶楼 | |
|
发表时间：2009-10-19
样式还不错！
|
| 返回顶楼 | |
|
发表时间：2009-10-20
可以当做一个tab选项卡使用
|
| 返回顶楼 | |
|
发表时间：2009-10-21
我觉得很丑，有山寨的感觉
|
| 返回顶楼 | |
|
发表时间：2009-10-22
whaosoft 写道 虽然不算什么技术 但页面挺好看~ 不对 好像都差不多 那长相
本来想全部用JQuery写的，但老板催得紧，没办法用了TABLE,其实我个人现在很不想用TABLE，因为现在能满足W2C标准的基本都用DIV+UL+LI，后期我还会更新的！ |
| 返回顶楼 | |
