聊天室设计页面
JSP 项目中涉及到一个聊天室，到网上找了一下，以前别人做过了很多种（包括Java ，C# ，PHP 等），但UI 层窗口大小都是固死了的，于是自己重新做了一个可以随窗体大小改变的的聊天室：
代码兼容：Firefox ，IE 6+
时间：-6-13 晚从画图到代码完成一个个半小时
先看伪设计图：
参照附件 聊天室设计页面计算方式.JPG
下面UI 层代码：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml" xml : lang ="en" lang ="en">
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=GBK" />
< script type ="text/javascript" src ="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></ script >
< script type ="text/javascript">
// 窗口大小
var winWidth = 0;
var winHeight = 0;
$(function (){
// 加载完成后
$(window).bind('load' ,init);
// 当窗体大小改变后
$(window).bind('resize' ,function (){
init();
scrollToButtom();
});
// 设置内容层样式
$("#content" ).bind('mouseout' ,function (){
this .style.borderColor= '#ccc'
}).bind('mouseover' ,function (){
this .style.borderColor= '#808080'
})
$("#rightsidebar>ul>li" ).bind('click' ,function (){
$.each(this .parentNode.childNodes,function (i,j){
$(j).css({"color" :"#000" });
});
$(this ).css({"color" :"#808080" });
document.getElementById('who' ).innerHTML = this .childNodes[0].childNodes[0].innerHTML;
}).bind('mouseout' ,function (){
this .style.backgroundColor='#fff' ;
}).bind('mouseover' ,function (){
this .style.backgroundColor='#ddd' ;
});
});
// 初始化
function init(){
winWidth = getWindowScroll()["width" ];
winHeight = getWindowScroll()["height" ];
// 计算出列表层的高度和高度计算方式参照：设计图
var listViewHeight = winHeight - (8*2 + 1*2 + 3*2 + 102 + 27 + 3*2 + 2 + 16);
var listViewLeft = winWidth - (8*2 + 1*2 + 3*2 + 282 + 3 + 2 + 3);
// 做最小值处理
listViewLeft = listViewLeft > 280 ? listViewLeft : 280;
listViewHeight = listViewHeight > 300 ? listViewHeight : 300;
// 为列表层设值
$("#leftsidebar" ).css({"width" : listViewLeft});
$("#rightsidebar" ).css({"width" : 280});
$("#leftsidebar" ).css({"height" : listViewHeight});
$("#rightsidebar" ).css({"height" : listViewHeight});
}
/**
* 得到WindowScroll 的值
*/
function getWindowScroll(){
var T, L, W, H, win = window, dom = document.documentElement, doc = document.body;
T = dom && dom.scrollTop || doc && doc.scrollTop || 0;
L = dom && dom.scrollLeft || doc && doc.scrollLeft || 0;
if (win.innerWidth){
W = win.innerWidth;
H = win.innerHeight;
}else {
W = dom && dom.clientWidth || doc && doc.clientWidth;
H = dom && dom.clientHeight || doc && doc.clientHeight;
}
return { top: T, left: L, width: W, height: H };
}
/****************** 下面为：业务逻辑代码 *********************/
// 验证
function goValidate(){
if (document.getElementById('who' ).innerHTML.length < 2){
alert(' 请选择发送的用户！' );
return false ;
} else if (document.getElementById("content" ).value.length < 3){
alert(' 至少发送3 个字' );
return false ;
} else {
setTimeout(send, 500);
}
}
// 发送
function send(){
$('#leftsidebar' ).html($('#leftsidebar' ).html() +
"<br /><span style='color:blue;'> 我对<span style='font-weight: bold;'>" + $("#who" ).text() +
"</span> 说：</span><br /><span style='margin-left:20px;line-height:30px;'>" + $("#content" ).val() +
"</span>" );
$("#content" ).val("" );
scrollToButtom();
}
// 设置滚动条的位置
function scrollToButtom(){
document.getElementById("leftsidebar" ).scrollTop = document.getElementById("leftsidebar" ).scrollHeight;
}
</ script >
< style type ="text/css">
/* 全局样式*/
body {margin :0 ; padding :0 ; width :100% ; height :100% ; background :#eee ;}
div {margin :3px ; }
/* 容器- Div 样式*/
#wrap {margin :8px ; border :1px solid #000 ; background :#fff ;}
#header {clear : both ; margin-bottom :6px !important ; margin :0 ; border :0 ; }
#leftsidebar {float :left ; border :1px solid #000 ; overflow-y :scroll ;}
#rightsidebar {width :280px ; margin-left :auto ; border :1px solid #000 ; overflow-y :scroll ;}
#shop {height :25px ; border :1px solid #000 ;}
#footer {height :100px ; border :1px solid #000 ;}
/* 功能- Div 样式*/
#content {width :99.5% ; height :50px ; border :2px solid #ccc ;}
#rightsidebar { }
#rightsidebar ul {list-style :none ; }
#rightsidebar ul li {border-top :1px solid #e1e1e1 ; height :40px ; line-height : 40px ; margin-left :-40px !important ; margin-left :2px ; }
#rightsidebar ul li div {background-position : 5px 5px ;padding-left :55px ;}
</ style >
</ head >
< body >
<!-- 最外层-->
< div id ="wrap">
<!-- 列表层[1] -->
< div id ="header">
<!-- 消息层[ 左] -->
< div id ="leftsidebar"> </ div >
<!-- 在线层[ 右] -->
< div id ="rightsidebar">
< ul >
< li title ="">< div style ="background:url(images/0.jpg) no-repeat;">< a href ="javascript:void(0);"> 邂逅思维/yl</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/1.jpg) no-repeat;">< a href ="javascript:void(0);"> 陸貳璇鉉</ a > [...]</ div ></ li >
< li title ="">< div style ="background:url(images/2.jpg) no-repeat;">< a href ="javascript:void(0);"> 天哪</ a > [ 和天天一伙的]</ div ></ li >
< li title ="">< div style ="background:url(images/3.jpg) no-repeat;">< a href ="javascript:void(0);"> /v 西门吹雪</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/4.jpg) no-repeat;">< a href ="javascript:void(0);"> 辉仔/love</ a > [ 整Java ，同行！]</ div ></ li >
< li title ="">< div style ="background:url(images/5.jpg) no-repeat;">< a href ="javascript:void(0);"> 魂牽夢境</ a > [ 一个女Java 人]</ div ></ li >
< li title ="">< div style ="background:url(images/6.jpg) no-repeat;">< a href ="javascript:void(0);"> 草帽崽儿</ a > [oneself]</ div ></ li >
< li title ="">< div style ="background:url(images/7.jpg) no-repeat;">< a href ="javascript:void(0);"> 晃晃悠悠</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/8.jpg) no-repeat;">< a href ="javascript:void(0);"> olinalv[ 吕]</ a > [ 恩，神秘！]</ div ></ li >
< li title ="">< div style ="background:url(images/9.jpg) no-repeat;">< a href ="javascript:void(0);"> 若尘</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/5.jpg) no-repeat;">< a href ="javascript:void(0);"> 斩梦人·天天</ a > [BOOS1]</ div ></ li >
< li title ="">< div style ="background:url(images/2.jpg) no-repeat;">< a href ="javascript:void(0);"> ^_^ 芹</ a > [ 美工MM]</ div ></ li >
< li title ="">< div style ="background:url(images/7.jpg) no-repeat;">< a href ="javascript:void(0);"> 龌龊</ a > [ 人如其名]</ div ></ li >
< li title ="">< div style ="background:url(images/3.jpg) no-repeat;">< a href ="javascript:void(0);"> 史前一猛男</ a > [ 猛就一个字]</ div ></ li >
</ ul >
</ div >
</ div >
<!-- 功能层-->
< div id ="shop"> 发送给：< span id ="who"> 所有人</ span ></ div >
<!-- 发送层-->
< div id ="footer">
< div >< textarea id ="content"></ textarea ></ div >
< div >
< span style ="float:left;">< a href ="javascript:void(0);"> 来自学术部的周星驰上线了！</ a ></ span >
< span style ="float:right;">
< input type ="button" value =" 取消" />
< input type ="button" value =" 发送" onClick ="goValidate()" />
</ span >
</ div >
</ div >
</ div >
</ body >
</ html >