[技术分享]h5 聊天室实例项目|仿微信群聊 html5
xiaoyan2015发布于2 年前 • 718 次阅读
之前由于项目需求,做过一款简约的聊天项目,后面随着技术的一步步累积,又重新对之前的项目进行了一次重构,就有了下面这个html5+css3+jQ+wcPop+swiper技术架构开发的仿微信手机端聊天室IM项目。
主要使用的是h5技术开发的,jquery配合插件开发,另外wcPop是自己开发的一款移动端弹窗组件,非常实用。
引入css及js插件如下:
另外项目中使用的弹窗wcPop.js,是自己开发的移动端弹窗组件,兼容所有移动设备(亲测),多种api调用方式及动画效果;
/*
@desc:聊天模块js片段
@about:Q:282310962
*/
// ...滚动聊天区底部
function wchat_ToBottom() {
$(".mescroll").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
}
// ...处理编辑器信息
var $editor = $(".J__wdtEditor"), _editor = $editor[0];
function surrounds() {
setTimeout(function () { //chrome
var sel = window.getSelection();
var anchorNode = sel.anchorNode;
if (!anchorNode) return;
if (sel.anchorNode === _editor ||
(sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) {
var range = sel.getRangeAt(0);
var p = document.createElement("p");
range.surroundContents(p);
range.selectNodeContents(p);
range.insertNode(document.createElement("br")); //chrome
sel.collapse(p, 0);
(function clearBr() {
var elems = [].slice.call(_editor.children);
for (var i = 0, len = elems.length; i < len; i++) {
var el = elems[i];
if (el.tagName.toLowerCase() == "br") {
_editor.removeChild(el);
}
}
elems.length = 0;
})();
}
}, 10);
}
if (that.hasClass("face")) { //小表情
var img = that[0].cloneNode(true);
if (!_editor.childNodes.length) {
_editor.focus();
}
_editor.blur(); //输入表情时禁止输入法
setTimeout(function () {
if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(img);
} else if (window.getSelection && window.getSelection().getRangeAt) {
range = _rng.getRange();
range.insertNode(img);
range.collapse(false);
_lastRange = range; //记录当前光标位置 (否则光标会跑到表情前面)
_rng.addRange();
}
}, 10);
}
function isEmpty() {
var html = $editor.html();
html = html.replace(/<br[\s\/]{0,2}>/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, "") == "";
}
作者:xiaoyan2015
链接:https://blog.csdn.net/yanxinyun1990/
本文为作者原创文章,转载请附上链接!