首页 > 程序开发 > web前端 > JavaScript >

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

2012-06-19

WebIM本地客户端,可以发送表情、调整字体、字体大小、字体颜色、加粗、下划线、斜体等;还支持收缩split条,详情等;上UI界面,界面还不够专业,需要美工支持,下一期在做优化!收缩详情chat.html 代码www.2ct...

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

上UI界面,界面还不够专业,需要美工支持,下一期在做优化!
\

收缩详情


\

chat.html 代码www.2cto.com
<!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 = [
&#39;<html>&#39;,
&#39;<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>&#39;,
&#39;<body jid="&#39;, userJID, &#39;"></body>&#39;,
&#39;</html>&#39;].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(&#39;InsertHTML&#39;, text, doc);
} else if (/safari/.test(agent)) {
sendMessageEditor.execCmd(&#39;InsertText&#39;, 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(&#39;WebIM requires jQuery v1.2.3 or later! You are using v&#39; + $.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=&#39;sendMessage" + receiverId + "&#39;]").get(0).contentWindow;
},
receiveMessageDoc: function (receiverId) {
receiverId = receiverId || "";
var docs = [];
$.each($("iframe[name^=&#39;receiveMessage" + receiverId + "&#39;]"), function () {
docs.push($(this.contentWindow.document));
});
return docs;
//return $($("iframe[name^=&#39;receiveMessage" + receiverId + "&#39;]").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: [
&#39;<html>&#39;,
&#39;<head><style type="text/css">&#39;,
&#39;body{border:0;margin:0;padding:3px;height:98%;cursor:text;background-color:white;font-size:12px;font-family:Courier,serif,monospace;}&#39;,
&#39;.msg{margin-left: 1em;}p{margin:0;padding:0;}.me{color: blue;}.you{color:green;}&#39;,
&#39;</style></head>&#39;,
&#39;<body></body>&#39;,
&#39;</html>&#39;
].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=&#39;", styleTpl, "&#39;>", content, "</span>" ].join("");
}
return [
&#39;<p class="&#39;, userCls, &#39;">&#39;, datetime, &#39; &#39;, userName, &#39;:</p>&#39;,
&#39;<p class="msg">&#39;, content, &#39;</p>&#39;
].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^=&#39;sendMessage&#39;]").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=&#39;", styleTpl, "&#39;>", content, "</span>" ].join("");
//remote.jsjac.chat.sendMessage(content, receiver);
}

// 清空发送区域
$(doc).find("body").html("");
}
},

faceImagePath: "images/emotions/",
faceElTpl: function (i) {
return [
"<img src=&#39;",
this.faceImagePath,
(i - 1),
"fixed.bmp&#39; gif=&#39;",
this.faceImagePath,
(i - 1),
".gif&#39;/>"
].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=&#39;" + $(this).attr("gif") + "&#39;/>";
var $chatMain = $(this).parents(".chat-main");
var win = $chatMain.find("iframe[name^=&#39;sendMessage&#39;]").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 = [&#39;<style type="text/css">body{&#39;, styleTpl,&#39;}</style>&#39;].join("");

$("body").find("iframe[name^=&#39;sendMessage&#39;]").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=&#39;display: none;&#39;";
}
return [
&#39;<div class="chat-main" id="&#39;, userJID,
&#39;" sender="&#39;, sender, &#39;" receiver="&#39;, receiver, &#39;">&#39;,
/*&#39;<form name="userForm">&#39;,
&#39;用户名:<input type="text" name="userName" value="boy"/>&#39;,
&#39;密码:<input type="password" name="password" value="boy"/>&#39;,

&#39;register: <input type="checkbox" name="register"/>&#39;,
&#39;sendTo: <input type="text" id="to" name="to" value="hoojo" />&#39;,
&#39;<input type="button" value="Login" id="login"/> &nbsp;&nbsp;&nbsp;&nbsp;&#39;,
&#39;<input type="button" value="Logout" id="logout"/>&#39;,
&#39;</form>&#39;,*/

&#39;<div id="chat"><div class="radius">&#39;,
&#39;<table>&#39;,
&#39;<tr>&#39;,
&#39;<td colspan="3" class="title"></td>&#39;,
&#39;</tr>&#39;,
&#39;<tr>&#39;,
&#39;<td class="receive-message">&#39;,
&#39;<iframe name="receiveMessage&#39;, userJID,&#39;" frameborder="0" width="100%" height="100%"></iframe>&#39;,
&#39;</td>&#39;,
&#39;<td rowspan="4" class="split" &#39;, display, &#39;>&nbsp;</td>&#39;,
&#39;<td rowspan="4" class="product-info" &#39;, display, &#39;>&#39;,
&#39;<ul>&#39;,
&#39;<div class="header">&nbsp;商品详情</div>&#39;,
&#39;<li class="pic">&#39;,
&#39;<img src="&#39;, product.pic, &#39;"/></li>&#39;,
&#39;<li class="product-name">&#39;, product.name, &#39;</li>&#39;,
&#39;<li class="price">团购价:<span>&#39;, product.price, &#39;</span>元</li>&#39;,
&#39;<li class="market-price">市场价:<s><i>&#39;, product.marketPrice, &#39;</i></s>元</li>&#39;,
&#39;<li>快递公司:&#39;, product.deliverOrgs, &#39;</li>&#39;,
&#39;<li>仓库:&#39;, product.wareHouses, &#39;</li>&#39;,
product.skuAttrs,
&#39;</ul>&#39;,
&#39;</td>&#39;,
&#39;</tr>&#39;,
&#39;<tr class="tool-bar">&#39;,
&#39;<td>&#39;,
&#39;<select name="font-family" class="family">&#39;,
&#39;<option>宋体</option>&#39;,
&#39;<option>黑体</option>&#39;,
&#39;<option>幼圆</option>&#39;,
&#39;<option>华文行楷</option>&#39;,
&#39;<option>华文楷体</option>&#39;,
&#39;<option>华文楷体</option>&#39;,
&#39;<option>华文彩云</option>&#39;,
&#39;<option>华文隶书</option>&#39;,
&#39;<option>微软雅黑</option>&#39;,
&#39;<option>Fixedsys</option>&#39;,
&#39;</select>&#39;,

&#39;<select name="font-size">&#39;,
&#39;<option value="12px">大小</option>&#39;,
&#39;<option value="10px">10</option>&#39;,
&#39;<option value="12px">12</option>&#39;,
&#39;<option value="14px">14</option>&#39;,
&#39;<option value="16px">16</option>&#39;,
&#39;<option value="18px">18</option>&#39;,
&#39;<option value="20px">20</option>&#39;,
&#39;<option value="24px">24</option>&#39;,
&#39;<option value="28px">28</option>&#39;,
&#39;<option value="36px">36</option>&#39;,
&#39;<option value="42px">42</option>&#39;,
&#39;<option value="52px">52</option>&#39;,
&#39;</select>&#39;,
&#39;<select name="color">&#39;,
&#39;<option value="" selected="selected">颜色</option>&#39;,
&#39;<option value="#000000" style="background-color:#000000"></option>&#39;,
&#39;<option value="#FFFFFF" style="background-color:#FFFFFF"></option>&#39;,
&#39;<option value="#008000" style="background-color:#008000"></option>&#39;,
&#39;<option value="#800000" style="background-color:#800000"></option>&#39;,
&#39;<option value="#808000" style="background-color:#808000"></option>&#39;,
&#39;<option value="#000080" style="background-color:#000080"></option>&#39;,
&#39;<option value="#800080" style="background-color:#800080"></option>&#39;,
&#39;<option value="#808080" style="background-color:#808080"></option>&#39;,
&#39;<option value="#FFFF00" style="background-color:#FFFF00"></option>&#39;,
&#39;<option value="#00FF00" style="background-color:#00FF00"></option>&#39;,
&#39;<option value="#00FFFF" style="background-color:#00FFFF"></option>&#39;,
&#39;<option value="#FF00FF" style="background-color:#FF00FF"></option>&#39;,
&#39;<option value="#FF0000" style="background-color:#FF0000"></option>&#39;,
&#39;<option value="#0000FF" style="background-color:#0000FF"></option>&#39;,
&#39;<option value="#008080" style="background-color:#008080"></option>&#39;,
&#39;</select>&#39;,
&#39;<div class="bold"></div>&#39;,
&#39;<div class="underline"></div>&#39;,
&#39;<div class="italic"></div>&#39;,
&#39;<div class="face"></div>&#39;,
&#39;<div class="history">消息记录</div>&#39;,
&#39;</td>&#39;,
&#39;</tr>&#39;,
&#39;<tr class="send-message">&#39;,
&#39;<td>&#39;,
&#39;<iframe name="sendMessage&#39;, userJID,&#39;" width="100%" height="80px" frameborder="0"></iframe>&#39;,
&#39;</td>&#39;,
&#39;</tr>&#39;,
&#39;<tr class="bottom-bar">&#39;,
&#39;<td><input type="text" id="to" name="to" value="hoojo" style="width: 100px; display: none;"/><input type="button" value="关闭" id="close"/>&nbsp;&#39;,
&#39;<input type="button" value="发送(Enter)" id="send"/> </td>&#39;,
&#39;</tr>&#39;,
&#39;</table></div>&#39;,
&#39;<div id="face"></div>&#39;,
&#39;</div>&#39;,
&#39;</div>&#39;
].join("");
},

initWebIM: function (userJID, receiver) {
var product = {
name: "小玩熊",
pic: "http://up.2cto.com/2012/0619/20120619113656557.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=&#39;" + jid + "&#39;]: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);

作者:hoojo

相关文章
最新文章
热点推荐