JavaScript/jQuery WebIM 即時聊天通信工具 本地客戶端

WebIM本地客戶端,可以發送表情、調整字體、字體大小、字體顏色、加粗、下劃線、斜體等;還支持收縮split條,詳情等;

上UI界面,界面還不夠專業,需要美工支持,下一期在做優化!

 

 

收縮詳情

chat.html 代碼www.aiwalls.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 = [
            '<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 p.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 p {
    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 [
            '<p 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>',*/
                   
                '<p id="chat"><p 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>',
                                    '<p class="header">&nbsp;商品詳情</p>',
                                    '<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>',
                                '<p class="bold"></p>',
                                '<p class="underline"></p>',
                                '<p class="italic"></p>',
                                '<p class="face"></p>',
                                '<p class="history">消息記錄</p>',
                            '</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></p>',
                    '<p id="face"></p>',
                '</p>',
            '</p>'
            ].join("");
        },
       
        initWebIM: function (userJID, receiver) {
            var product = {
                name: "小玩熊",
                pic: "/wp-content/images1/20181004/20120619113656557311.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
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *