`
topcss
  • 浏览: 100828 次
  • 性别: 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  
大哥，搞个截图多好啊，让观众先看看东西再决定下不下呵呵
发表评论

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

相关推荐

    基于ASP的聊天室设计

    基于ASP的聊天室设计通常包括前端用户界面和后端服务器处理两部分。前端主要由HTML、CSS和JavaScript构成，用于展示聊天室的界面，接收用户输入并发送请求；后端则由ASP脚本处理这些请求，与数据库进行交互，存储和...

    \基于Ajax聊天室的设计与分析

    ### 基于Ajax聊天室的设计与分析 #### 一、引言 近年来，随着互联网技术的迅猛发展，网络应用程序的设计与开发已成为软件开发的重要组成部分。在众多的Web开发工具中，.NET框架以其强大的功能和简便的操作脱颖而出...

    聊天室课程设计

    这个聊天室设计包含多个关键功能，以提供丰富的用户体验。以下是详细的知识点解释： 1. **前端设计**： - **聊天场所**：前端页面是用户进行聊天的主要界面，需要有清晰的布局和用户友好的设计。 - **自定义设置*...

    asp简易聊天室页面

    【ASP简易聊天室页面】是一个基于ASP（Active Server Pages）技术构建的在线交流平台，它允许用户注册并发表留言，同时展示留言的时间戳。在IIS（Internet Information Services）这样的Web服务器上运行，该聊天室...

    asp.net聊天室代码设计报告

    总的来说，ASP.NET聊天室的设计涉及用户身份验证、页面交互、数据存储和实时通信等多个方面，展示了Web应用程序开发中的常见技术和实践。通过这个项目，开发者可以深入理解ASP.NET框架的使用，以及如何构建一个基本...

    网上聊天室系统设计与开发asp毕业设计(源代码+论文+开题报告+答辩PPT).zip

    网上聊天室系统设计与开发是ASP（Active Server Pages）技术在Web应用中的一个典型实践，主要涉及了网页交互、数据库管理、用户身份验证等多个IT领域的关键知识点。ASP是一种微软公司的服务器端脚本语言，用于创建...

    网络聊天室—毕业设计

    【网络聊天室—毕业设计】是一项利用ASP技术构建的在线交流平台，主要针对的是网络社区中的实时互动需求。ASP（Active Server Pages）是微软开发的一种服务器端脚本环境，用于生成动态网页，它允许开发者使用...

    ASP.NET聊天室课程设计

    ASP.NET聊天室课程设计是一个典型的Web应用程序开发项目，它展示了如何使用ASP.NET技术和SQL2000数据库来创建一个实时的在线交流平台。这个项目旨在帮助学习者掌握基础的Web编程技能，特别是针对用户交互和数据管理...

    基于ASP.NET的网络聊天室的设计与实现

    总的来说，基于ASP.NET的网络聊天室设计与实现是一个综合性的项目，涉及到Web编程、数据库设计、客户端交互等多个技术环节。通过合理的设计和开发，我们可以构建出功能完善、性能优秀的聊天室系统，满足用户的实时...

    江湖聊天室源码

    通过分析和学习这款江湖聊天室源码，开发者不仅可以提升自己的ASP编程技能，还能了解到一个完整聊天室系统的设计思路，这对于想要构建类似应用的人来说非常有价值。当然，由于技术的不断发展，现在的聊天室往往采用...

    基于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聊天室课程设计** 本课程设计的目标是构建一个基于JSP的聊天室系统，旨在教授学生如何利用JSP的内置对象、Ajax技术、集合类中的Vector类以及JavaBean技术来实现动态交互的Web应用。以下是核心知识点的详细解释...

    毕业设计ASP+ACCESS聊天室.rar

    【标题】：“毕业设计ASP+ACCESS聊天室.rar”是一个基于ASP（Active Server Pages）技术和ACCESS数据库的网页聊天系统。这个毕业设计项目包含了论文和实际的源代码，为学习者提供了了解和实践网络聊天室开发的实例。...

    聊天室课程设计—Web课程设计.zip

    【聊天室课程设计—Web课程设计】项目是一个典型的Web应用程序示例，主要涵盖了聊天功能的实现，使用了MyEclipse作为开发工具，并结合了MySQL数据库进行数据存储。在这个项目中，我们将探讨以下几个重要的IT知识点：...

    基于jQuery的Ajax聊天室程序

    【基于jQuery的Ajax聊天室程序】是一个典型的Web交互应用，它利用了Ajax技术来实现实时的、无需页面刷新的用户交流。Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页...

    聊天室实现

    该系统主要由登录页面、验证页面、聊天室页面、离开页面、查看聊客页面、帮助页面等页面构成。整个设计简洁明了、实用，使用简单。本系统实现了聊天的基本功能，点对多聊天，点对点聊天，传送文件等。 下面是该系统...

    爱情江湖完美版_江湖聊天室_爱情江湖聊天室_

    7. **扩展性**：作为“完美版”，爱情江湖聊天室可能支持多房间、私聊、群组聊天等功能，这需要设计灵活的架构，允许功能模块的添加和修改。 8. **部署与运维**：考虑到服务的稳定性和可扩展性，应用可能部署在...

    JSP 聊天室---毕业设计

    【JSP聊天室---毕业设计】是一个以JSP（JavaServer Pages）技术为核心，结合SQL SERVER数据库实现的基于B/S（Browser/Server）架构的在线聊天系统。这个系统旨在为用户提供一个实时交流的平台，是典型的Web应用示例...

    phpAJAX聊天室

    这个聊天室系统能够让用户无需刷新页面就能进行实时的消息传递，提供了一种高效、便捷的沟通方式。接下来，我们将深入探讨该系统的构成及其核心知识点。 首先，我们要理解PHP（Hypertext Preprocessor）是服务器端...

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