js-chat-noline

最新推荐文章于 2024-11-06 00:07:17 发布

原创最新推荐文章于 2024-11-06 00:07:17 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #class #div #input #session #button

程序专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript创建并管理多个聊天对话框，包括对话框的生成、位置调整、消息发送、关闭操作以及对话框间的优先级管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
$(function()
{
	var offset_init_x=300;
	var offset_init_y=50;
	var offset_move_scale=15;
	var chat_z_index=3;
	var chatbox_num=0;
	var chatbox_maxnum=4;
	//生成对话框层
	$.extend({
			chatbox_show:function(id,z){
			offset_init_x+=20;   //坐标偏移15
			offset_init_y+=20;   //坐标偏移15
			if (chat_z_index>100){chat_z_index=3;}
			$("#main_sup").after("<div class='chatbox_main' id='"+id+"'></div>");	
			$("#"+id).css({"background-color":"#98bf21","left":offset_init_x+"px","top":offset_init_y+"px","position":"absolute","z-index":z});
			$("#"+id).append("<div class='chatbox_per'>"+id+"<div id='fre_name1001' class='fre_name'>北极鱼</div><div id='close_"+id+"' class='chatbox_per_a'>×</<div></div> ");
			$("#"+id).append("<div class='chatbox_nr' id='chatbox_nr"+id+"'>444</div>");
			$("#"+id).append("<div class='chatbox_tool'></div>");
			$("#"+id).append("<div class='chatbox_sendmsg'><textarea name='msginput"+id+"' rows='6' id='msginput"+id+"' class='msg_input1'></textarea></div>");
			$("#"+id).append("<div class='chatbox_button'><input type='button' name='closebtn"+id+"' id='closebtn"+id+"' value='关闭'/> <input type='button' name='msgsubmit"+id+"' id='msgsubmit"+id+"' value='发送' /></div>");
	  
			//<div class='chatbox_per'>"+id+"<div id='close_"+id+"' class='chatbox_per_a'>×</<div></div>
			$("#"+id).draggable(); //对话框层可以拖动		
			$("input[id^='msgsubmit']").click(function(){ //信息发送按钮被点击后触发						 							 
				    $.post("Ajax_response.aspx", 
					{ Action: "post", msginput: $("#msginput"+id+"").val() }, 
					function (data){  $("#chatbox_nr"+id+"").html("<div class='a1'>您输入的值是："+data+"</div>");}, 
					"html") ;	 
					 $("#msginput"+id+"").text="";//清空发送框	
						});	
			
			$("div[id^='close_chat_b_id']").click(function(){ //关闭按钮被点击后触发														 
					$(this).parent().parent().remove();	 
													 });	
			$("input[id^='closebtn']").click(function(){ //关闭按钮被点击后触发														 
					$(this).parent().parent().remove();	 
													 });											 
			
			$("#"+id).mouseup(function(){  //本窗口被点击后，移至最前方。
									// $("#temp_output").html(id+"chat_z_index="+chat_z_index)
									 $("#"+id).css({"z-index":chat_z_index++});									
									 }) ;						
 		
			$.post("Getchat_a.aspx", 
					{ Action: "post", msginput: $("#msginput"+id+"").val() }, 
					function (data){  $("#chatbox_nr"+id+"").html(data);}, 
					"html") ;	
		
						}
			});

	
	$("#main_sup").draggable();  //对话框层可以拖动
	
	//改变层的z-index值
	$.extend({
			 change_div_z:function(id,z){
				 $("#"+id).css({"z-index":z});
				 }
			 
			 });
 
 	 
	
	//移除前面第n个对话窗体
	$.extend({
			remove_div_pre:function(id){
			 //$("#"+id).next().remove();
			// $("#"+id)[0].remove();
			$("#"+id).next().next().next().next().remove();
			if( offset_init_x>=360)
			{
			     offset_init_x=300;  //恢复弹出窗口的位置
	             offset_init_y=50;
			}
			 }
		 
		 });
 
	//当用户名被点击时，生成与该用户的chatbox
	$("div[id^='f_per_id']").click(function(){
											var obj_id="";
											var h_per_id_val="";
											var chat_b_id="";
											var chat_f_name="";
											obj_id=$(this)[0].id;  //获取当前ID
											h_per_id_val=$("#"+obj_id+">input").val(); //获取f_per_id内input的值
											chat_f_name=$("#"+obj_id+">input").val(); //获取f_per_id隐藏的用户名
											chat_b_id="chat_b_id"+h_per_id_val;  //生成类似于chat_b_id1001的id
											if(	$("#"+chat_b_id).length>0) //判断是否存在id=chat_b_id1001的对象									
												{   //若存在，则使其显示在最上层。
												chat_z_index++;
												$.change_div_z(chat_b_id,chat_z_index);
												//alert("exist");   
												}
											else{   //若不存在，则生成此id对话框层。 
											 
												chat_z_index++;
												$.chatbox_show(chat_b_id,chat_z_index);
												chatbox_num++;
												
												   if(chatbox_num>chatbox_maxnum)  //判断对话窗口的数量
													{
														$.remove_div_pre(chat_b_id);//删除对话框
														chatbox_num--;
														
														}
												
												
												 }  
											
											
											});
 
 
$.extend({
			 user_session:function(s){
					$.post("set_session.aspx", 
					{ Action: "post", userid: $(s).val() }, 
					function (data){   $("#putout_b").html(data);}, 
					"text") ;	
					$("#usertouxiang_name").html($(s).val());	 
						}
			});

	$("#niuzai1").click( function(){$.user_session("#niuzai1");});
	$("#beijiyu1").click( function(){$.user_session("#beijiyu1");});
	$("#feifei1").click( function(){$.user_session("#feifei1");});
	 
});
 

 </script>