随笔-57  评论-117  文章-1  trackbacks-0
JavaScript/jQuery WebIM 及时聊天通信工具 本地客户端

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

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

image

收缩详情

image

 

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"/> &nbsp;&nbsp;&nbsp;&nbsp;',
                    '<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, '>&nbsp;</td>',
                            '<td rowspan="4" class="product-info" ', display, '>',
                                '<ul>',
                                    '<div class="header">&nbsp;商品详情</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"/>&nbsp;',
                            '<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);


作者：hoojo
出处：
blog：http://blog.csdn.net/IBM_hoojo
         http://hoojo.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。


版权所有，转载请注明出处 本文出自：
分享道版权所有，欢迎转载，转载请注明出处，谢谢
posted on 2012-06-18 19:04 hoojo 阅读(4451) 评论(1)  编辑  收藏 所属分类: Ajax【富客户端技术】 、HTML/CSS 、JavaScript 、jQuery

评论:
# re: JavaScript/jQuery WebIM 及时聊天通信工具 本地客户端[未登录] 2012-06-19 09:05 | oscar
头像cute！  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 hoojo