h5仿钉钉实战|仿钉钉聊天|仿钉钉模板界面

html5仿钉钉聊天weDingTalk微钉|h5钉聊系统| 仿钉钉界面

基于web端h5+css3+Zepto+jquery+swiper+wcPop等技术开发的仿钉钉移动办公系统，仿钉钉聊天界面模板，实现了类似钉钉聊天界面，发送消息、表情，预览图片、视频，发送红包，右键长按菜单等功能。

][3]

// 发送信息
function isEmpty() {
    var html = $editor.html();
    html = html.replace(//ig, "\r\n");
    html = html.replace(/<[^img].*?>/ig, "");
    html = html.replace(/ /ig, "");
    return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}
$(".J__wchatSubmit").on("click", function () {
    // 判断内容是否为空
    if (isEmpty()) return;

    var _html = $editor.html();
    var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
    _html = _html.replace(reg, "$1$2");
    var msgTpl = [
        '
\
            
\
                
风铃子
\
                
'+ _html +'
\
            
\
            \
        
'
    ].join("");
    $chatMsgList.append(msgTpl);

    // 清空聊天框并获取焦点（处理输入法和表情 - 聚焦）
    if (!$(".wdt__choose-panel").is(":hidden")) {
        $editor.html("");
    } else {
        $editor.html("").focus();
    }
    wchat_ToBottom();
});

// >>> 【工具栏选择功能模块】------------------------------------------
// ...选择图片
$("#J__choosePicture").on("change", function () {
    $(".wdt__choose-panel").hide();

    var file = this.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var _img = this.result;
        var _tpl = [
            '
\
                
\
                    
风铃子
\
                    
\
                
\
                \
            
'
        ].join("");
        $chatMsgList.append(_tpl);

        setTimeout(function(){wchat_ToBottom();}, 17);
    }
});

// ...选择文件
$("#J__chooseFile").on("change", function () {
    $(".wdt__choose-panel").hide();

    var file = this.files[0], fileSuffix = /\.[^\*]+/.exec(file.name).toString(), fileExt = fileSuffix.substr(fileSuffix.lastIndexOf('.') + 1, fileSuffix.length).toLowerCase();
    console.log(fileSuffix);
    console.log(fileExt);
    var fileTypeArr = ['jpg', 'jpeg', 'png', 'gif', 'txt', 'rar', 'zip', 'pdf', 'docx', 'xls'];
    if ($.inArray(fileExt, fileTypeArr) < 0) {
        wcPop({content: '附件只支持jpg、jpeg、png、gif、txt、rar、zip、pdf、docx、xls格式的文件', time: 2});
        return;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var _file = this.result;
        console.log(_file);
        var _tpl = [
            '
\
                
\
                    
风铃子
\
                    
\
                        
\
                            \
                            
\
                                
'+ file.name +'
'+ formateSize(file.size) +'
\
                            
\
                            \
                        
\
                    
\
                
\
                \
            
'
        ].join("");
        $chatMsgList.append(_tpl);

        setTimeout(function () {wchat_ToBottom();}, 17);
    }

    /** 格式化文件大小显示  value : file文件的大小值 */
    formateSize = function (value) {
        if (null == value || value == '') {
            return "0 Bytes";
        }
        var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
        var index = 0;
        var srcsize = parseFloat(value);
        index = Math.floor(Math.log(srcsize) / Math.log(1024));
        var size = srcsize / Math.pow(1024, index);
        size = size.toFixed(2);        //保留的小数位数
        return size + unitArr[index];
    }
});