`
topcss
  • 浏览: 99711 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
文章分类
社区版块
存档分类
最新评论

聊天室设计页面

JavaScriptCSSjQueryIEXHTML
阅读更多

 

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"> &nbsp; </ 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 >

 

  • 大小: 59.4 KB
分享到：
| JavaScript 面向对象 之 一个基于MVC的 ...
评论
2 楼 topcss 2009-06-18  
widen 写道
大哥，搞个截图多好啊，让观众先看看东西再决定下不下呵呵

呵呵，谢谢提醒，刚刚发现我贴的代码如果直接复制会产生很多空格，马山加一个截图和重新传一份代码。 

<!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;}
/*
#rightsidebar ul li {border-top:1px solid #e1e1e1; height:40px; line-height: 40px;}
#rightsidebar ul li div {background-position: 5px 5px;height: 40px;line-height:40px;padding-left:60px;}
*/
 </style>
 
	</head>
	<body>
	<!-- 最外层 -->
	<div id="wrap">
		<!-- 列表层[1] -->
		<div id="header">
			<!-- 消息层[左] -->
			<div id="leftsidebar">&nbsp;</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>
		
		<!-- 功能层2 -->
		<div id="shop">发送给：<span id="who">所有人</span></div>
		
		<!-- 发送层3 -->
		<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>
1 楼 widen 2009-06-18  
大哥，搞个截图多好啊，让观众先看看东西再决定下不下呵呵
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    聊天室课程设计

    基于web的聊天室课程设计 前台聊天室页面：为用户提供聊天场所，可对网站风格、广告链接等进行设置；用户可以根据个人习惯选择字体、文字颜色和表情等；具有私聊功能，私聊内容仅私聊双方可见；可手动清除聊天内容。

    JSP聊天室课程设计

    本课程设计通过一个聊天室，向读者介绍了JSP的内置对象（包括Session对象、Application对象、request对象和response对象）、Ajax技术、集合类中的Vector类以及JavaBean技术的实际应用。通过本章的学习，可以加深对...

    基于Java聊天室的socket设计和实现（论文+程序设计源码+数据库文件）

    1.绪论 4 1.1研究背景 4 1.2发展现状 4 1.3主要的内容 5 2.开发工具及相关技术介绍 6 ...5.3聊天室界面 14 5.4服务器显示界面 14 6.系统测试 16 6.1系统调试的目的和意义 16 6.2功能测试用例 16 7总结 17 致谢 19

    ajax无刷新简单聊天室

    ajax无刷新简单聊天室 ajax无刷新简单聊天室

    ASP.NET简单在线聊天室系统

    实现了聊天室系统，功能包括用户登录、自动注册、用户发言、实时浏览发言、... \MyChatRoom\Main.aspx 聊天室主页面 \MyChatRoom\ShowMessage.aspx 浏览留言页面 \MyChatRoom\Speak.aspx 发表留言页面

    ASP简易聊天室源码 绍兴人聊天室改进

    ASP简易聊天室源码 绍兴人聊天室改进 毕业设计

    聊天室 jsp 网页制作

    随着Internet技术的飞速发展，网络已经成为人们生活中不可缺少的一部分...本次课程设计的目的就是编写一个无刷新的聊天室，该聊天室不但可以实时显示在线人员列表及聊天内容，而且增加了聊天表情和文字颜色选择的功能。

    基于jsp的网络聊天室设计与实现.docx

    基于jsp的网络聊天室设计与实现

    仅利用session和application实现聊天室

    聊天室的设计包括：用户进行登录，选择聊天室，进行聊天，退出聊天室。 在聊天室中，用户只需输入一个用户名就可以进入聊天室，但是如果当前有人在使用该用户名，那么就必须换一个唯一的用户名。 具体要求：  ...

    JAVA聊天室_计算机网络课程设计

    计算机网络课程的课程设计，一个JAVA聊天室，很不错哦

    基于Node.js的实时在线聊天室设计源码

    本项目是基于Node.js开发的实时在线聊天室设计源码，包含61个文件，其中包括24个JavaScript文件，8个Vue组件文件，6个JPG图片，5个XML文件，4个Map文件，2个HTML页面，2个CSS样式文件，2个PNG图片，以及1个Babel配置...

    毕业设计 JSP 数据库 在线聊天室

    本人自己用JSP和SQLServer2000做的在线聊天室，包含了数据库文件和JSP页面源码，拿了可以直接用。

    基于ASP的网络聊天室的设计和实现

    聊天室系统的即时交流方式满足了网络中多人同时聊天交流的需要，使得较多的人在同一个聊天页面进行交流变得方便，简单。 本设计所完成的网络聊天室具有常用聊天室的所有功能，包括多人同时在线聊天、两人间的私密...

    网上聊天室ASP.NET语言

    采用ASP.NET语言，有各种界面的源代码，登录页面的设计，确认页面的设计，还有注册页面等

    Ajax 实现聊天室代码

    使用Ajax技术实现聊天室程序。使用Ajax来动态获取聊天记录，可以避免屏幕不断刷新而出现的闪动现象，另外，使用Ajax也可以减少服务器端的负荷，对这种客户端与服务器端通信量极大的程序是非常有意义的。对用户来讲，...

    聊天室的制作与设计

    小小聊天室的制作与设计小小聊天室的制作与设计

    [计算机毕设]基于asp的网络聊天室系统设计与实现(源代码+项目报告).zip

    聊天室系统的即时交流方式满足了网络中多人同时聊天交流的需要，使得较多的人在同一个聊天页面进行交流变得方便，简单。 本设计所完成的网络聊天室具有常用聊天室的所有功能，包括多人同时在线聊天、两人间的私密...

    毕业设计：ASP基于WEB网上聊天室设计(源代码)

    用户登录通过判断，合法登录后可以在聊天室留下你想说的话。 5.2.2系统的功能特点 1）.操作简单、界面简洁：完全控件式的页面布局 2）.即时可见：对用户的留言将立即在主页的对应栏目显示出来，达到"即时见效"的功能...

    多用户聊天模块设计源码.rar

    菜单功能1、起始页面为loginchat.aspx2、填写昵称，点击选择聊天室3、随意选择一个聊天室，点击进入聊天室4、在最下方输入框中输入聊天内容，点击发送消息，即可发送到群聊窗口5、开启多个聊天窗口，用不同用户名...

    免费计算机毕业设计-网络聊天室系统设计与实现（包含论文+代码）

    计算机毕业设计中的网络聊天室系统是一个基于SpringBoot技术开发的实时通信平台，它利用SpringBoot的轻量级和自动配置特性，为用户打造了一个简洁、高效且易于部署的在线交流环境。该系统通常包含用户认证、私人聊天...

Magicbox
Global site tag (gtag.js) - Google Analytics