您的位置：首页 > Web前端 > JQuery

JavaScript/jQuery WebIM 及时聊天通信工具本地客户端

2012-06-18 19:44 531 查看

WebIM本地客户端，可以发送表情、调整字体、字体大小、字体颜色、加粗、下划线、斜体等；还支持收缩split条，详情等；

上UI界面，界面还不够专业，需要美工支持，下一期再看看能不能优化！

收缩详情

chat.html 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>IM Chat</title>
	
    <meta http-equiv="author" content="hoojo">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/chat-2.0.css" />
    <script type="text/javascript" src="jslib/jquery-1.7.1.min.js"></script>    
    <script type="text/javascript" src="jslib/send.message.editor-1.0.js"></script>	
	<script type="text/javascript" src="jslib/local.chat-2.0.js"></script>
	<script type="text/javascript">
		$(function () {

			$.WebIM({
				sender: "admin",
				receiver: "hoojo"
			});					
			$(".chat-main").show(800);
				
		});
	</script>
  </head>
  
  <body>
  </body>
</html>

send.message.editor-1.0.js iframe editor编辑器js模块

/**
 * IM chat Send Message iframe editor
 * @author: hoojo
 * @email: hoojo_@126.com
 * @blog: http://blog.csdn.net/IBM_hoojo 
 * @createDate: 2012-5-24
 * @version 1.0
 **/
var agent = window.navigator.userAgent.toLowerCase();
var sendMessageEditor = {

 	// 获取iframe的window对象
	getWin: function () {
        return /*!/firefox/.test(agent)*/false ? sendMessageEditor.iframe.contentWindow : window.frames[sendMessageEditor.iframe.name];
    },

	//获取iframe的document对象
	getDoc: function () {
		return !/firefox/.test(agent) ? sendMessageEditor.getWin().document : (sendMessageEditor.iframe.contentDocument || sendMessageEditor.getWin().document);
	},

	init: function (userJID) {
		//打开document对象，向其写入初始化内容，以兼容FireFox
		var doc = sendMessageEditor.getDoc();
		doc.open();
		var html = [
			'<html>', 
			'<head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;background-color:white;font-size:12px;font-family:Courier,serif,monospace;}</style></head>',
			'<body jid="', userJID, '"></body>', 
			'</html>'].join("");
		doc.write(html);
		//打开document对象编辑模式
		doc.designMode = "on";
		doc.close();
	},
 
 	getContent: function () {
 		var doc = sendMessageEditor.getDoc();
 		//获取编辑器的body对象
		var body = doc.body || doc.documentElement;
		//获取编辑器的内容
		var content = body.innerHTML;
		//对内容进行处理，例如替换其中的某些特殊字符等等
		//Some code
		
		//返回内容
		return content;
 	},
 	
 	 //统一的执行命令方法
	execCmd: function (cmd, value, d){
		var doc = d || sendMessageEditor.getDoc();
	    //doc对象的获取参照上面的代码
	    //调用execCommand方法执行命令
	    doc.execCommand(cmd, false, value === undefined ? null : value);
	},
	
	getStyleState: function (cmd) {
		var doc = sendMessageEditor.getDoc();
		//doc对象的获取参考上面的对面
		//光标处是否是粗体
		var state = doc.queryCommandState(cmd);
		if(state){
		  //改变按钮的样式
		}
		return state;
	},
	insertAtCursor: function (text, d, w){
		var doc = d || sendMessageEditor.getDoc();
		var win = w || sendMessageEditor.getWin();
		//win对象的获取参考上面的代码
		if (/msie/.test(agent)) {
			win.focus();
			var r = doc.selection.createRange();
			if (r) {
				r.collapse(true);
			    r.pasteHTML(text);      
			}
		} else if (/gecko/.test(agent) || /opera/.test(agent)) {
			win.focus();
			sendMessageEditor.execCmd('InsertHTML', text, doc);
		} else if (/safari/.test(agent)) {
			sendMessageEditor.execCmd('InsertText', text, doc);
		}
	}
};

chat.css 样式

/**
 * function: im web chat css
 * author: hoojo
 * createDate: 2012-5-26 上午11:42:10
 */
@CHARSET "UTF-8";

* {
	font-family: Courier,serif,monospace;
	font-size: 12px;
}

.chat-main {
	position: absolute;
	/*right: 80px;*/
	left: 50px;
	top: 20px;
	z-index: 999;
	display: none;
}

.chat-main .radius {
	background-color: white;
	border: 8px solid #94CADF;
	border-radius: 1em;
}

#chat {
	position: relative;
	/*left: 150px;*/
	padding: 0;
	margin: 0;
}
#chat table {
	border-collapse: collapse;
	width: 435px;
	*width: 460px;
	/*width: 410px;*/
	/*width: 320px;*/
}

#chat table .title {
	font-weight: bold;
	color: green;
	padding: 3px;
	background-color: #94CADF;
}

/* 收缩条 */
#chat table .split {
	background-color: #94CADF;
	cursor: pointer;
}

/* ################## product info #################### */
#chat table .product-info {
	width: 30%;
	/*display: none;*/
	padding: 0;
	margin: 0;
	vertical-align: top;
}

#chat table .product-info ul {
	margin: 0;
	padding: 0;
}

#chat table .product-info ul div.header {
	background-color: #EBEFFE;
	line-height: 22px;
	font-size: 12px;
	color: black;
}

#chat table .product-info ul li {
	list-style: none outside none;
	background-color: white;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding-left: 5px;
	line-height: 22px;
	font-size: 11px;
	color: #6F6F6F;
	width: 140px;
}

#chat table .product-info ul li.pic {
	height: 200px;
	padding: 0 5px 0 5px;
	border: 1px dashed #ccc;
	text-align: center;
}

#chat table .product-info ul li.pic img {
}

#chat table .product-info ul li.product-name {
	font-weight: bold;
	color: black;
}

#chat table .product-info ul li.price span {
	font-family: Courier;
	font-size: 16px;
	font-weight: bold;
	color: #ED4E08;
}

#chat table .product-info ul li.market-price s {
	color: black;
}

#chat table .product-info ul li a {
	float: right;
}

#chat table .product-info ul li.info {
	display: none;
}

/*########### 接收消息区域 ############ */
#chat table .receive-message {
	height: 250px;
}

#chat table .send-message {
	width: 100%;
	/*height: auto;*/
}

#chat table td {
	/*border: 1px solid white;*/
}

#chat table .bottom-bar {
	background-color: #94CADF;
	text-align: right;
}

/* ############## 工具条 ################# start */
#chat table .tool-bar {
	height: 25px;
	background-color: #94CADF;
}

#chat table .tool-bar select {
	float: left;
}

#chat table .tool-bar select.family {
	width: 45px;
	*width: 55px;
}

#chat table .tool-bar div {
	width: 17px;
	height: 16px;
	float: left;
	cursor: pointer;
	margin-right: 2px;
	margin-top: 1px;
	*margin-top: 2px;
	background: transparent url("../images/tb-sprite.gif") no-repeat scroll 0 0;
}

#chat table .tool-bar .color {
	margin-left: 2px;
	background-position: -159px 0;
}
#chat table .tool-bar .bold {
	/*background-position: 0 0;*/
}
#chat table .tool-bar .italic {
	background-position: -18px 0;
}
#chat table .tool-bar .underline {
	background-position: -32px 0;
}
#chat table .tool-bar .face {
	margin: 2px 0 0 3px;
	background-image: url("../images/facehappy.gif");
}
#chat table .tool-bar .history {
	background-image: none;
	width: 60px;
	float: right;
	margin-top: 3px;
	font-size: 12px;
	display: none;
}
/* ###### 表情 ###### */
#chat #face {
	border: 1px solid black;
	width: 275px;
	*width: 277px;
	position: relative;
	left: 8px;
	top: -370px;
	_top: -359px;
	z-index: 3;
	display: none;
}

#chat #face img {
	border: 1px solid #ccc;
	border-right: none;
	border-bottom: none; 
	cursor: pointer;
}

#send {
	width: 90px;
	height: 25px;
}
#close {
	width: 40px;
	height: 25px;
}

local.chat-2.0.js 核心js代码

/***
 * jquery local chat
 * @version v2.0 
 * @createDate -- 2012-5-28
 * @author hoojo
 * @email hoojo_@126.com
 * @requires jQuery v1.2.3 or later, send.message.editor-1.0.js
 * Copyright (c) 2012 M. hoo
 **/
 
;(function ($) {

	if (/1\.(0|1|2)\.(0|1|2)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
		alert('WebIM requires jQuery v1.2.3 or later!  You are using v' + $.fn.jquery);
		return;
	}
	
	var _im = $.IM = {};
	_im.version = 2.0;
	
	var faceTimed, count = 0;
	
	_im.defaultOptions = {
	
		chat: "#chat",
		chatEl: function () {
			var $chat = _im.defaultOptions.chat;
			if ((typeof _im.defaultOptions.chat) == "string") {
				$chat = $(_im.defaultOptions.chat);
			} else if ((typeof _im.defaultOptions.chat) == "object") {
				if (!$chat.get(0)) {
					$chat = $($chat);
				}
			} 
			return $chat;
		},
		sendMessageIFrame: function (receiverId) {
			return $("iframe[name='sendMessage" + receiverId + "']").get(0).contentWindow;
		},
		receiveMessageDoc: function (receiverId) {
			receiverId = receiverId || "";
			var docs = [];
			$.each($("iframe[name^='receiveMessage" + receiverId + "']"), function () {
				docs.push($(this.contentWindow.document));
			});
			return docs;
			//return $($("iframe[name^='receiveMessage" + receiverId + "']").get(0).contentWindow.document);
		},
		sender: "", // 发送者
		receiver: "", // 接收者
		setTitle: function (chatEl) {
			var receiver = this.getReceiver(chatEl);
			chatEl.find(".title").html("和" + receiver + "聊天对话中");
		},
		getReceiver: function (chatEl) {
			var receiver = chatEl.attr("receiver");
			if (~receiver.indexOf("@")) {
				receiver = receiver.split("@")[0];
			}
			return receiver;
		},
		
		// 接收消息iframe样式
		receiveStyle: [
			'<html>',
				'<head><style type="text/css">',
				'body{border:0;margin:0;padding:3px;height:98%;cursor:text;background-color:white;font-size:12px;font-family:Courier,serif,monospace;}',
				'.msg{margin-left: 1em;}p{margin:0;padding:0;}.me{color: blue;}.you{color:green;}',
				'</style></head>',
				'<body></body>',
			'</html>'
		].join(""),
		writeReceiveStyle: function (receiverId) {
			this.receiveMessageDoc(receiverId)[0].get(0).write(this.receiveStyle);
		},
		
		/***
		 * 发送消息的格式模板					
		 * flag = true 表示当前user是自己，否则就是对方
		 **/ 
		receiveMessageTpl: function (userName, styleTpl, content, flag) {
			var userCls = flag ? "me" : "you";
			// 设置当前发送日前
			var date = new Date();
			var datetime = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();
			datetime = " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
			if (styleTpl && flag) {
				content = [ "<span style='", styleTpl, "'>", content, "</span>" ].join("");
			}
			return [
				'<p class="', userCls, '">', datetime, '  ', userName, ':</p>',
				'<p class="msg">', content, '</p>'
			].join("");
		},
		
		// 工具类按钮触发事件返回html模板
		sendMessageStyle: {
		 	cssStyle: {
		 		bold: "font-weight: bold;",
		 		underline: "text-decoration: underline;",
		 		italic: "font-style: oblique;"
		 	},
		 	setStyle: function (style, val) {
		 		if (val) {
		 			_im.defaultOptions.sendMessageStyle[style] = val;
		 		} else {
			 		var styleVal = _im.defaultOptions.sendMessageStyle[style];
			 		if (styleVal === undefined || !styleVal) {
			 			_im.defaultOptions.sendMessageStyle[style] = true;
			 		} else {
			 			_im.defaultOptions.sendMessageStyle[style] = false;
			 		}
		 		}
		 	},
		 	getStyleTpl: function () {
		 		var tpl = "";
		 		$.each(_im.defaultOptions.sendMessageStyle, function (style, item) {
		 			//alert(style + "#" + item + "#" + (typeof item));
		 			if (item === true) {
	 					tpl += _im.defaultOptions.sendMessageStyle.cssStyle[style];
		 			} else if ((typeof item) === "string") {
		 				//alert(style + "-------------" + sendMessageStyle[style]);
	 					tpl += style + ":" + item + ";";
		 			}
		 		});
		 		return tpl;
		 	}
		},
		// 向接收消息iframe区域写消息
		writeReceiveMessage: function (receiverId, userName, content, flag) {
			if (content) {
				// 发送消息的样式
				var styleTpl = _im.defaultOptions.sendMessageStyle.getStyleTpl();
				var receiveMessageDoc = _im.defaultOptions.receiveMessageDoc(receiverId);
				$.each(receiveMessageDoc, function () {
					var $body = this.find("body");
					// 向接收信息区域写入发送的数据
					$body.append(_im.defaultOptions.receiveMessageTpl(userName, styleTpl, content, flag));
					// 滚动条滚到底部
					this.scrollTop(this.height());
				});
			}
		},
		// 发送消息
		sendHandler: function ($chatMain) {
			var doc = $chatMain.find("iframe[name^='sendMessage']").get(0).contentWindow.document;
			
			var content = doc.body.innerHTML;
			content = $.trim(content);
			content = content.replace(new RegExp("<br>", "gm"), "");
			// 获取即将发送的内容
			if (content) {
				var sender = $chatMain.attr("sender");
				var receiverId = $chatMain.attr("id");
				// 接收区域写消息
				_im.defaultOptions.writeReceiveMessage(receiverId, sender, content, true);
				
				//############# XXX
				var receiver = $chatMain.find("#to").val();
				//var receiver = $chatMain.attr("receiver");
				// 判断是否是手机端会话，如果是就发送纯text，否则就发送html代码
				var flag = _im.defaultOptions.isMobileClient(receiver);
				if (flag) {
					var text = $(doc.body).text();
					text = $.trim(text);
					if (text) {
						// 远程发送消息
						//remote.jsjac.chat.sendMessage(text, receiver);
					}
				} else { // 非手机端通信 可以发送html代码
					var styleTpl = _im.defaultOptions.sendMessageStyle.getStyleTpl();
					content = [ "<span style='", styleTpl, "'>", content, "</span>" ].join("");
					//remote.jsjac.chat.sendMessage(content, receiver);
				}
				
				// 清空发送区域
				$(doc).find("body").html("");
			}
		}, 
		
		faceImagePath: "images/emotions/",
		faceElTpl: function (i) {
			return [
				"<img src='",
				this.faceImagePath,
				(i - 1),
				"fixed.bmp' gif='",
				this.faceImagePath,
				(i - 1),
				".gif'/>"
			].join("");
		},
		// 创建表情html elements
		createFaceElement: function ($chat) {
			var faces = [];
			for (var i = 1; i < 100; i++) {
		 		faces.push(this.faceElTpl(i));
			 	if (i % 11 == 0) {
			 		faces.push("<br/>");
			 	} 
			}
			$chat.find("#face").html(faces.join(""));
			this.faceHandler($chat);
		},
		// 插入表情
		faceHandler: function ($chat) {
			$chat.find("#face img").click(function () {
			 	$chat.find("#face").hide(150);
			 	var imgEL = "<img src='" + $(this).attr("gif") + "'/>";
			 	var $chatMain = $(this).parents(".chat-main");
			 	var win = $chatMain.find("iframe[name^='sendMessage']").get(0).contentWindow;
			 	var doc = win.document;
			 	sendMessageEditor.insertAtCursor(imgEL, doc, win);
			});
			// 表情隐藏
			$chat.find("#face, #face img").mouseover(function () {
				window.clearTimeout(faceTimed);
			}).mouseout(function () {
				window.clearTimeout(faceTimed);
				faceTimed = window.setTimeout(function () {
					$chat.find("#face").hide(150);
				}, 700);
			});
		},
		/***
		 * 发送消息工具栏按钮事件方法
		 **/
		toolBarHandler: function () {
			var $chat = $(this).parents(".chat-main");
			var targetCls = $(this).attr("class");
			if (targetCls == "face") {
				$chat.find("#face").show(150);
				window.clearTimeout(faceTimed);
				faceTimed = window.setTimeout(function () {
					$chat.find("#face").hide(150);
				}, 1000);
			} else if (this.tagName == "DIV") {
				_im.defaultOptions.sendMessageStyle.setStyle(targetCls);
			} else if (this.tagName == "SELECT") {
				_im.defaultOptions.sendMessageStyle.setStyle($(this).attr("name"), $(this).val());
				if ($(this).attr("name") == "color") {
					$(this).css("background-color", $(this).val());
				}
			}
			
			// 设置sendMessage iframe的style css
			_im.defaultOptions.writeSendStyle();
		},
		// 设置sendMessage iframe的style css
		writeSendStyle: function () {
			var styleTpl = _im.defaultOptions.sendMessageStyle.getStyleTpl();
			var styleEL = ['<style type="text/css">body{', styleTpl,'}</style>'].join("");
			
			$("body").find("iframe[name^='sendMessage']").each(function () {
				var $head = $(this.contentWindow.document).find("head");
				if ($head.find("style").size() > 1) {
					$head.find("style:gt(0)").remove();
				}
				if (styleTpl) {
					$head.append(styleEL);
				}
			});
		},				
		
		isMobileClient: function (receiver) {
			return false;
		},

		chatLayoutTemplate: function (userJID, sender, receiver, product, flag) {
			var display = "";
			if (flag) {
				display = "style='display: none;'";
			}
			return [
			'<div class="chat-main" id="', userJID,
				'" sender="', sender, '" receiver="', receiver, '">',
				/*'<form name="userForm">',
			    	'用户名：<input type="text" name="userName" value="boy"/>',
			    	'密码：<input type="password" name="password" value="boy"/>',
			    	
			    	'register: <input type="checkbox" name="register"/>',
			    	'sendTo： <input type="text" id="to" name="to" value="hoojo" />',
			    	'<input type="button" value="Login" id="login"/>     ',
			    	'<input type="button" value="Logout" id="logout"/>',
			    '</form>',*/
				    
			    '<div id="chat"><div class="radius">',
				    '<table>',
				    	'<tr>',
				    		'<td colspan="3" class="title"></td>',
				    	'</tr>',
				    	'<tr>',
				    		'<td class="receive-message">',
				    			'<iframe name="receiveMessage', userJID,'" frameborder="0" width="100%" height="100%"></iframe>',
				    		'</td>',
				    		'<td rowspan="4" class="split" ', display, '> </td>',
				    		'<td rowspan="4" class="product-info" ', display, '>',
				    			'<ul>',
				    				'<div class="header"> 商品详情</div>',
				    				'<li class="pic">',
				    				'<img src="', product.pic, '"/></li>',
				    				'<li class="product-name">', product.name, '</li>',
				    				'<li class="price">团购价：<span>', product.price, '</span>元</li>',
				    				'<li class="market-price">市场价：<s><i>', product.marketPrice, '</i></s>元</li>',
				    				'<li>快递公司：', product.deliverOrgs, '</li>',
				    				'<li>仓库：', product.wareHouses, '</li>',
				    				product.skuAttrs,
				    			'</ul>',
				    		'</td>',
				    	'</tr>',
				    	'<tr class="tool-bar">',
				    		'<td>',
				    			'<select name="font-family" class="family">',
				    				'<option>宋体</option>',
				    				'<option>黑体</option>',
				    				'<option>幼圆</option>',
				    				'<option>华文行楷</option>',
				    				'<option>华文楷体</option>',
				    				'<option>华文楷体</option>',
				    				'<option>华文彩云</option>',
				    				'<option>华文隶书</option>',
				    				'<option>微软雅黑</option>',
				    				'<option>Fixedsys</option>',
				    			'</select>',
				    			
				    			'<select name="font-size">',
				    				'<option value="12px">大小</option>',
				    				'<option value="10px">10</option>',
				    				'<option value="12px">12</option>',
				    				'<option value="14px">14</option>',
				    				'<option value="16px">16</option>',
				    				'<option value="18px">18</option>',
				    				'<option value="20px">20</option>',
				    				'<option value="24px">24</option>',
				    				'<option value="28px">28</option>',
				    				'<option value="36px">36</option>',
				    				'<option value="42px">42</option>',
				    				'<option value="52px">52</option>',
				    			'</select>',
				    			'<select name="color">',
									'<option value="" selected="selected">颜色</option>',
									'<option value="#000000" style="background-color:#000000"></option>',
									'<option value="#FFFFFF" style="background-color:#FFFFFF"></option>',
									'<option value="#008000" style="background-color:#008000"></option>',
									'<option value="#800000" style="background-color:#800000"></option>',
									'<option value="#808000" style="background-color:#808000"></option>',
									'<option value="#000080" style="background-color:#000080"></option>',
									'<option value="#800080" style="background-color:#800080"></option>',
									'<option value="#808080" style="background-color:#808080"></option>',
									'<option value="#FFFF00" style="background-color:#FFFF00"></option>',
									'<option value="#00FF00" style="background-color:#00FF00"></option>',
									'<option value="#00FFFF" style="background-color:#00FFFF"></option>',
									'<option value="#FF00FF" style="background-color:#FF00FF"></option>',
									'<option value="#FF0000" style="background-color:#FF0000"></option>',
									'<option value="#0000FF" style="background-color:#0000FF"></option>',
									'<option value="#008080" style="background-color:#008080"></option>',
								'</select>',
				    			'<div class="bold"></div>',
				    			'<div class="underline"></div>',
				    			'<div class="italic"></div>',
				    			'<div class="face"></div>',
				    			'<div class="history">消息记录</div>',
							'</td>',
				    	'</tr>',
				    	'<tr class="send-message">',
				    		'<td>',
				    			'<iframe name="sendMessage', userJID,'" width="100%" height="80px" frameborder="0"></iframe>',
							'</td>',
				    	'</tr>',
				    	'<tr class="bottom-bar">',
				    		'<td><input type="text" id="to" name="to" value="hoojo" style="width: 100px; display: none;"/><input type="button" value="关闭" id="close"/> ',
				    		'<input type="button" value="发送(Enter)" id="send"/> </td>',
				    	'</tr>',
				    '</table></div>',
				    '<div id="face"></div>',
			    '</div>',
			'</div>'
			].join("");
		},
		
		initWebIM: function (userJID, receiver) {
			var product = {
				name: "小玩熊",
				pic: "http://avatar.csdn.net/9/7/A/2_ibm_hoojo.jpg",
				price: "198.00",
				marketPrice: "899.90",
				deliverOrgs: "EMS",
				wareHouses: "A库",
				skuAttrs: ""
			};
			var chatEl = $(_im.defaultOptions.chatLayoutTemplate(userJID, _im.defaultOptions.sender, receiver, product));
			$("body").append(chatEl);						
			
			// 拖拽
			//$("#" + userJID).easydrag();
			// 初始化sendMessageEditor相关信息
			sendMessageEditor.iframe = this.sendMessageIFrame(userJID);
			sendMessageEditor.init(userJID);	
			
			this.setTitle(chatEl);
			this.writeReceiveStyle(userJID);
			this.writeSendStyle();
			this.createFaceElement(chatEl);
			
			// 查看更多详情
			chatEl.find(".more").click(function () {
				var $ul = $(this).parents("ul");
				$ul.find(".more").toggle();
				$ul.find(".info").toggle();
				$ul.find(".pic").toggle();
			});
			
			// 收缩详情
			chatEl.find(".split").toggle(function () {
				$(".product-info").hide();
				$(this).parents(".radius").css("border-right-width", "0");
			}, function () {
				$(".product-info").show();
				$(this).parents(".radius").css("border-right-width", "8px");
			});
			
			// 工具类绑定事件 settings.toolBarHandler
			chatEl.find(".tool-bar td").children().click(this.toolBarHandler);
		 	chatEl.find("#send").click(function () {
		 		var $chatMain = $(this).parents(".chat-main");
				_im.defaultOptions.sendHandler($chatMain);
		 	});
		 	chatEl.find("#close").click(function () {
		 		var $chatMain = $(this).parents(".chat-main");
				$chatMain.hide(500);
		 	});
		 	
		 	$(this.sendMessageIFrame(userJID).document).keyup(function (event) {
		 		var e = event || window.event;
		 		var keyCode = e.which || e.keyCode;
		 		if (keyCode == 13) {
		 			var $chatMain = $("#" + $(this).find("body").attr("jid"));
		 			_im.defaultOptions.sendHandler($chatMain);
		 		}
		 	});
		},
		// 取消闪动提示
		cancelFlashTip: function (jid) {
			var $chat = $(".chat-main[id='" + jid + "']:hidden");
			if ($chat.get(0)) {
				$chat.show();
			}
			//$chatMessage.removeAttr("jid");
			if ($(".chat-main:hidden").size() == 0) {
				$(".have-msg").hide();
				$(".no-msg").show();
			}
		},
				
		// 消息提示
		messageTip: function () {
			if (count % 2 == 0) {
				window.focus();
				document.title = "你来了新消息，请查收！";
			} else {
				document.title = "";				
			}
			if (count > 4) {
				document.title = "";	
				count = 0;			
			} else {
				window.setTimeout(_im.defaultOptions.messageTip, 1000);
				count ++;
			}
		}
	};
	
	
	$.extend({
		WebIM: function (opts) {
			opts = opts || {};
			// 覆盖默认配置
			_im.defaultOptions = $.extend(_im.defaultOptions, _im.defaultOptions, opts);
			var settings = $.extend({}, _im.defaultOptions, opts);	
			settings.initWebIM("user-jid", settings.receiver);
		}
	});
})(jQuery);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JavaScript/jQuery WebIM 及时聊天通信工具 本地客户端

JavaScript/jQuery WebIM 及时聊天通信工具本地客户端