python模拟开发WebQQ（二）

前端页面设计

前端主要采用bootstrap和jquery开发&＃xff0c;聊天室的页面展示代码在template/webqq/dashboard.html

主要设计分为&＃xff1a;

对data_type的切换是联系人还是群组&＃xff0c;

联系人搜索和列表的设计&＃xff0c;

联系人列表通过通过for循环取出

对在和谁聊天名字的显示&＃xff0c;

聊天内容和输入框img&＃xff0c;

以及登录页面。

 主要代码

效果展示

用jquery实现选中聊天对象变色以及将把聊天人是谁赋值给dialog-box-head

$(document).ready(function(){//用递归&＃xff0c;结束这个线程在进行下一个&＃xff0c;不用forGetNewMsg_hpy();/*不用setInterval每次用一个线程RefreshMsgs &＃61; setInterval(function(){//定时器3秒向后端请求GetNewMsg_hpy();},3000);*/$("#contact-list a").click(function(){//点中与谁聊天的颜色改变&＃xff0c;并且把名字赋予dialog-box-head$ (this).addClass("active");$(this).children("span").addClass("hide");$(this).children("span").text("0");$(this).siblings().removeClass("active");//同级别siblings,切换聊天人//console.log("hello");SwitchChatBoxhpy(this);});});