论坛首页 → 入门技术论坛 →

聊天室设计页面

浏览 3121 次
锁定老帖子 主题：聊天室设计页面
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • topcss
  • 等级: 初级会员
  • 性别:
  • 文章: 24
  • 积分: 60
  • 来自: 重庆
   发表时间：2009-06-14  

 

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
返回顶楼
         
  • widen
  • 等级: 二星会员
  • 性别:
  • 文章: 12
  • 积分: 229
  • 来自: 北京
   发表时间：2009-06-18  
大哥，搞个截图多好啊，让观众先看看东西再决定下不下呵呵
返回顶楼
          回帖地址
0 请登录后投票
  • topcss
  • 等级: 初级会员
  • 性别:
  • 文章: 24
  • 积分: 60
  • 来自: 重庆
   发表时间：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>
  • 大小: 27.3 KB
返回顶楼
          回帖地址
1 请登录后投票
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics