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

共计 3187 个字符，预计需要花费 8 分钟才能阅读完成。

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

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

// 发送信息
function isEmpty() {
var html = $editor.html();
html = html.replace(/<br[\s\/]{0,2}>/ig, “\r\n”);
html = html.replace(/<[^img].*?>/ig, “”);
html = html.replace(/&nbsp;/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, “<a href=’$1$2′ target=’_blank’>$1$2</a>”);
var msgTpl = [
‘<li class=”me”>\
<div class=”content”>\
<p class=”author”> 风铃子 </p>\
<div class=”msg”>’+ _html +'</div>\
</div>\
<a class=”avatar” href=” 微钉 - 好友主页 (详细资料).html”><img src=”img/uimg/u__chat-img07.jpg” /></a>\
</li>’
].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 = [
‘<li class=”me”>\
<div class=”content”>\
<p class=”author”> 风铃子 </p>\
<div class=”msg picture”><img class=”img__pic” src=”‘+ _img +'” /></div>\
</div>\
<a class=”avatar” href=” 微钉 - 好友主页 (详细资料).html”><img src=”img/uimg/u__chat-img07.jpg” /></a>\
</li>’
].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 = [
‘<li class= “me”>\
<div class=”content”>\
<p class=”author”> 风铃子 </p>\
<div class=”msg attachment”>\
<div class=”card flexbox flex-alignc”>\
<span class=”ico-bg wdt__bg01″><i class=”iconfont icon-fujian”></i></span>\
<div class=”file-info flex1″ title=”‘+ file.name +'”>\
<p class=”name”>’+ file.name +'</p><p class=”size”>’+ formateSize(file.size) +'</p>\
</div>\
<a class=”btn-down” href=”‘+ _file +'” target=”_blank” download=”‘+ file.name +'”><i class=”iconfont icon-down”></i></a>\
</div>\
</div>\
</div>\
<a class=”avatar” href=” 微钉 - 好友主页 (详细资料).html”><img src=”img/uimg/u__chat-img07.jpg” /></a>\
</li>’
].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];
}
});