javascript好友列表对话窗口
网页截图 聊天框和对话框都可拖动
聊天网页.html
talk.js
list.js
talk.css css文件
聊天网页.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script charset="gb2312" src="js/talk.js" type="text/javascript"></script>
<script charset="gb2312" src="js/list.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/talkskin.css" />
<script type="text/javascript">
function showList() {
var frilist = new FriendList("talk","200","450","40","1080","#DCDCFF","4","body");
frilist.CreateFriendList();
var admin ="<div id='im' class='divcss'>"+
"<img src='images/header.jpg' width='32' height='32' alt='' onclick='openTalk("+ 1 +","+ 1+")' />" +
4 + "</div>"
frilist.AddFriendListItem("好友",admin,"block");
frilist.AddFriendListItem("店家",admin,"");
frilist.AddFriendListItem("服务人员",admin,"");
frilist.AppendListItem();
}
</script>
<title>聊天</title>
</head>
<body>
<form name="chat" action="../talk/talktouseraction!sendMes" method="post">
<div id="list">
</div>
<div id="main" class="dragclass" style="left:650px;top:80px;">
<div id="ChatHead">
</div>
<div id="ChatBody">
<div id="ChatContent"></div>
<div id="ChatBtn">
<script type="text/jscript">
//setInterval("sendMes('')", 5000);
function openTalk(id, name){
ChatOpen(id, name);
}
ChatClose();
showList();
</script>
<textarea name="chatvalue" rows="3" style="width:280px"></textarea>
<input name="Submit" type="button" class="divcss" id="sendmes" onclick="ChatSend(this.form);" value="发送" />
</div>
</div>
</div>
<div style="width:100%;float:left;overflow:visible;position:fixed;bottom:0px;>
<div class="foot_wrap">
<div class="foot_cont">
<div class="foot_right">
<img src="images/user.gif" alt="显示聊天窗口" onclick = "ListAction()">
</div>
<div class="foot_left"></div>
<div class="foot_middle"></div>
</div>
</div>
</div>
</form>
</body>
</html>
talk.js
function getObjectStyle(id){
var temp = document.getElementById(id);
if (temp){
return temp.style;
}else{
return null;
}
}
//顶部菜单
function ChatHidden(){getObjectStyle("ChatBody").display = "none";}
function ChatShow(){getObjectStyle("ChatBody").display = "";}
function ChatClose(){getObjectStyle("main").display = "none";}
//打开消息框
function ChatOpen(id, name){
getObjectStyle("main").display = "";
document.getElementById("ChatHead").innerHTML = "";
document.getElementById("ChatHead").innerHTML += "和" + name + "聊天中";
document.getElementById("ChatHead").innerHTML += "<img src='images/close.png' width='18' height='14' align='right' alt='最小化' onclick='ChatClose()' />";
document.getElementById("ChatHead").innerHTML += "<img src='images/max.png' width='18' height='14' align='right' alt='还原' onclick='ChatShow()' />";
document.getElementById("ChatHead").innerHTML += "<img src='images/min.png' width='18' height='14' align='right' alt='关闭' onclick='ChatHidden()' />";
}
//聊天发送消息
function ChatSend(obj){
var o = obj.chatvalue;
if (o.value.length>0){
document.getElementById("ChatContent").innerHTML+="<p class='usernamefrom'>我说:</p>"+ "<div align='left'>"+o.value+"</div>";
document.getElementById("ChatContent").innerHTML+="<p class='usernameto'>他说:</p>" + "<div align='right'>"+o.value+"</div>";
window.document.getElementById("ChatContent").scrollTop = window.document.getElementById("ChatContent").scrollHeight;
sendMes(o.value);
o.value='';
}
}
if (document.getElementById){
var n = 500;
var mousedownsign = false;
var which = false; //标识是列表还是聊天框
var y,x,dy,dx; //dx.dy标识按下鼠标时的位置
document.onmousedown = down;
document.onmouseup = up;
//MouseMove
function move(e)
{
if (!e) e = window.event;
if (mousedownsign){
if(which == false){
main.style.left = dx + e.clientX - x + "px";
main.style.top = dy + e.clientY - y + "px";
return false;
}else{
ListFriendList.style.left = dx + e.clientX - x + "px";
ListFriendList.style.top = dy + e.clientY - y + "px";
return false;
}
}
}
//MouseDown
function down(e){
if (!e) e = window.event;
//判定选定相应部位后移动
if(e.srcElement.id == "ListHeaderId"){
which = true;
mousedownsign = true;
}else if(e.srcElement.id == "ChatHead"){
which = false;
mousedownsign = true;
}
e.srcElement.style.zIndex = n++;
dx = e.clientX;
dy = e.clientY;
x = e.clientX;
y = e.clientY;
document.onmousemove = move;
}
//MouseUp
function up(){
mousedownsign = false;
document.onmousemove = null;
}
}
list.js
var ListFriendList = document.createElement("list");
var signshow = false;
function minList(){
ListFriendList.style.display = "none";
}
function maxList(){
ListFriendList.style.display = "";
}
function ListAction(){
if(signshow){
maxList();
signshow = !signshow;
}else{
minList();
signshow = !signshow;
}
}
function moveList(){
ListFriendList.style.left += 10;
}
function FriendList(id,width,height,top,left,borderColor,borderWidth,parent)
{
this.id = id;
this.width = width + "px";
this.height = height + "px";
this.top = top + "px";
this.left = left + "px";
this.borderColor = borderColor;
this.borderWidth = borderWidth;
this.parent = parent;
this.itemList = [];
this.currentItem = null;
}
FriendList.prototype.CreateFriendList = function()
{
var Me = this;
ListFriendList.id = Me.id;
ListFriendList.style.width = Me.width;
ListFriendList.style.height = Me.height;
ListFriendList.style.position = "absolute";
ListFriendList.style.top = Me.top;
ListFriendList.style.left = Me.left;
ListFriendList.style.border = Me.borderWidth + "px solid " + Me.borderColor ;
ListFriendList.style.padding = "0px";
ListFriendList.style.margin = "0px";
ListFriendList.onmousedown = moveList;
if (Me.parent.toLowerCase() == "body")
{
document.body.appendChild(ListFriendList);
}
else if(document.getElementById(Me.parent) != "undefined")
{
document.getElementById(Me.parent).appendChild(ListFriendList);
}
else
{
return;
}
}
FriendList.prototype.AddFriendListItem = function(title,content,bShow)
{
var Me = this;
var bShow = bShow;
var itemCount = Me.itemList.length;
for (i = 0; i < itemCount; i++)
{
if (Me.itemList[i][2] == "block")
{
bShow = "none";
}
}
var ItemList = [title,content,bShow];
Me.itemList.push(ItemList);
}
FriendList.prototype.changeItemList = function(id)
{
var Me = this;
var currentItemID = Me.id + "_ItemList_" + Me.currentItem
if(id == currentItemID)
{
return;
}else{
var oldContentID = Me.id + "_ContentList_" + currentItemID.substring(currentItemID.lastIndexOf("_")+1,currentItemID.length);
document.getElementById(oldContentID).style.display = "none";
var currentItemID = id.substring(id.lastIndexOf("_")+1,id.length);
var currentContentID = Me.id + "_ContentList_" + currentItemID;
document.getElementById(currentContentID).style.display = "block";
Me.currentItem = currentItemID;
}
}
FriendList.prototype.AppendListItem = function()
{
var Me = this;
var itemCount = Me.itemList.length;
var heights = itemCount * 22 + 22; //列表框的长度
var itemContentHeight = Me.height.substring(0,Me.height.indexOf("px")) - heights;
var itemHeader = document.createElement("div");
itemHeader.style.cssText = "width:100%;clear:both;height:20px;font-size:14px;font-weight:bold;margin:0px;padding:0px;line-height:20px;text-align:center;background:#DCDCFF;border:solid #8B8D72;border-width:1px 0px; cursor:move";
itemHeader.innerHTML = "UserList";
itemHeader.id = "ListHeaderId";
document.getElementById(Me.id).appendChild(itemHeader);
for (i = 0; i < itemCount; i++)
{
if(Me.itemList[i][2] == "block") {
Me.currentItem = i;
}
var itemListTitle = document.createElement("div");
itemListTitle.id = Me.id + "_ItemList_" + i;
itemListTitle.style.cssText = "width:100%;clear:both;height:20px;font-size:14px;font-weight:bold;margin:0px;padding:0px;line-height:20px;text-align:center;background:#DCDCFF;border:solid #8B8D72;border-width:1px 0px; cursor:pointer";
itemListTitle.onclick = function(){Me.changeItemList(this.id);}
itemListTitle.innerHTML = itemListTitle.innerHTML + Me.itemList[i][0];
document.getElementById(Me.id).appendChild(itemListTitle);
var itemContent = document.createElement("div");
itemContent.id = Me.id + "_ContentList_" + i;
itemContent.style.cssText = "float:left;width:100%;clear:both;text-align:left;margin:0px;padding:0px;display:" + Me.itemList[i][2] + ";height:" + itemContentHeight + "px;"
itemContent.innerHTML = Me.itemList[i][1];
document.getElementById(Me.id).appendChild(itemContent);
}
}
talk.css css文件
@charset "utf-8";
.foot_wrap * { position:relative;}
.foot_cont{ float:left;width:100%; height:34px; margin:4px 0 0 0; padding:0 20px; overflow:hidden; text-align:left; }
.foot_left{ float:left; width:30%; height:34px; margin:7px 0; overflow:hidden; line-height:21px;text-align:center;}
.foot_middle{ float:left; width:30%; height:20px; margin:7px 0; overflow:hidden; line-height:21px;text-align:center;}
.foot_wrap{
height:44px;
overflow:hidden;
text-align:center;
-moz-opacity:0.6;
opacity:0.6;
filter:alpha(opacity=60);
background:url(../images/showlist.gif) repeat-x bottom;
}
.foot_right{
float:right;
width:30%;
height:34px;
margin:7px 0;
overflow:hidden;
line-height:21px;
text-align:center;
}
body {
text-align:left;
font-family: Verdana, Arial;
font-size: 16px;
font-style: normal;
line-height: 20px;
font-weight: normal;
font-variant: normal;
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;
background-color: #FFF;
cursor: default;
}
form {
margin:0;
font:normal 12px Verdana, Arial;
}
table,input {
font:normal 12px Verdana, Arial;
}
a:link,a:visited{
text-decoration:none;
color:#333333;
background-color: #9F9;
}
a:hover{
text-decoration:none;
color:#FF6600
}
#main {
width:300px;
position:absolute;
left:600px;
top:100px;
background:#EFEFFF;
text-align:left;
filter:Alpha(opacity=90)
}
#ChatHead {
text-align:center;
padding:3px;
border:1px solid #003399;
background:#DCDCFF;
font-size:11px;
color:#3366FF;
cursor:move;
}
#ChatHead a:link,#ChatHead a:visited, {
font-size:14px;
font-weight:bold;
padding:0 3px
}
#ChatBody {
border:1px solid #003399;
border-top:none;
padding:2px;
}
#ChatContent {
height:300px;
padding:6px;
overflow-y:scroll;
word-break: break-all
}
#ChatBtn {
border-top:1px solid #003399;
padding:2px
}
.divcss img{
vertical-align:middle;
}
.usernamefrom {
font-size: 12px;
font-style: normal;
color: #00C;
text-align:left;
}
.usernameto {
font-size: 12px;
font-style: normal;
color: #00C;
text-align:right;
}
.fromtalkmes {
text-align: left;
}
.totalkmes {
text-align: right;
}
.ButtonCss {
background-color: #9FF;
}