默认
发表评论 1
钉钉办公h5实例|仿钉钉聊天weDingTalk
阅读(6491)?|?评论(1 收藏1 淘帖
h5高仿钉钉办公移动端——weDingTalk微钉,最近一直研究钉钉app,觉得里面的功能模块及效果都挺棒哒,于是也利用html5+css3+rem+wcPop+zepto等技术做了一个微钉h5项目,使用css3实现了类似QQ聊天多图像拼合,里面很多链接地方使用到了Material Design效果。

项目截图:
钉钉办公h5实例|仿钉钉聊天weDingTalk_001360截图20180915003708059.png 钉钉办公h5实例|仿钉钉聊天weDingTalk_002360截图20180915003826602.png
钉钉办公h5实例|仿钉钉聊天weDingTalk_003360截图20180915005347716.png 钉钉办公h5实例|仿钉钉聊天weDingTalk_004360截图20180915005419923.png
钉钉办公h5实例|仿钉钉聊天weDingTalk_006360截图20180915005901996.png 钉钉办公h5实例|仿钉钉聊天weDingTalk_007360截图20180915010048485.png
钉钉办公h5实例|仿钉钉聊天weDingTalk_008360截图20180915010335077.png 钉钉办公h5实例|仿钉钉聊天weDingTalk_010360截图20180915013242999.png
钉钉办公h5实例|仿钉钉聊天weDingTalk_011360截图20180915013303062.png 钉钉办公h5实例|仿钉钉聊天weDingTalk_012360截图20180915010948002.png
钉钉办公h5实例|仿钉钉聊天weDingTalk_013360截图20180915011004813.png 钉钉办公h5实例|仿钉钉聊天weDingTalk_014360截图20180915011140916.png
钉钉办公h5实例|仿钉钉聊天weDingTalk_015360截图20180915011705229.png 钉钉办公h5实例|仿钉钉聊天weDingTalk_017360截图20180915011927963.png
钉钉办公h5实例|仿钉钉聊天weDingTalk_018360截图20180915012046733.png 钉钉办公h5实例|仿钉钉聊天weDingTalk_019360截图20180915012132931.png
var $chatMsgList = $("#J__chatMsgList");
// ...处理编辑器信息
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);
}

// 定义光标位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {
        getRange: function () {
                if (_sel && _sel.rangeCount > 0) {
                        return _sel.getRangeAt(0);
                }
        },
        addRange: function () {
                if (_lastRange) {
                        _sel.removeAllRanges();
                        _sel.addRange(_lastRange);
                }
        }
}

// 格式编辑器包含标签
_editor.addEventListener("click", function () {
        $(".wdt__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function () {
        surrounds();
}, true);
_editor.addEventListener("input", function () {
        surrounds();
}, false);

// ...选择文件
$("#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]; } }); // ...拆开红包功能 $(".J__getRedPackets").on("click", function(){ var getHbIdx = wcPop({ id: 'wdtPopGetHb', skin: 'ios', content: $("#J__popupTmpl-getRedPacket").html(), xclose: true, style: 'background-color: #f3f3f3; width: 280px;', show: function () { $("body").on("click", ".J__btnGetRedPacket", function () { var that = $(this); that.addClass("active"); setTimeout(function(){ that.removeClass("active"); }, 1000); }); } }); });

    /* __ 触摸模拟(active) */
    .wdt__material-cell:active{background-color: rgba(25,31,37,.1)!important; transition: all .3s;}
    /* __ 模拟水波效果 */
    .wdt__ripple, .wdt__ripple-fff{overflow: hidden; position: relative;}
    .wdt__ripple:before, .wdt__ripple-fff:before{
    	background-image: radial-gradient(circle, #191f25 10%, transparent 11%); background-repeat: no-repeat; background-position: center;
    	content: ''; display: block; pointer-events: none; opacity: 0; height: 100%; width: 100%; position: absolute; left: 0; top: 0;
    	transform: scale(8,8); transition: transform .5s, opacity 1s;
    }
    .wdt__ripple-fff:before{background-image: radial-gradient(circle, #fff 10%, transparent 11%);}
    .wdt__ripple:active:before, .wdt__ripple-fff:active:before{opacity: .1; transform: scale(0,0); transition: 0s;}
    .wdt__ripple.disabled, .wdt__ripple-fff.disabled{pointer-events: none;}
    
    /* …… 微钉主布局——首页.layout …… */
    .weDingTalk__panel{-webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-tap-highlight-color: transparent; transition: transform .3s;}
    .we__dingtalk-wrapper{height: calc(100vh); position: relative;}
    .wdt__container{overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; position: relative;}
    
    /* —— 顶部header */
    .wdt__topBar .inner{/*background-image: linear-gradient(90deg,#3296fa 10%,#00d3f3);*/ background: #fff; height:1rem; width:100%; z-index:999; position:relative;}
    .wdt__topBar.topfixed{padding-bottom:1rem;}
    .wdt__topBar.topfixed .inner{max-width:750px; width:100%; position:fixed; top:0;}
    .wdt__topBar .inner .barTit{color:#191f25; font-size:.36rem; font-family: 'Microsoft Yahei'; margin-top: -.03rem; padding-left: .25rem; position: relative;}
    .wdt__topBar .inner .barTit.sm{color: #575b60; font-size: .32rem; padding-left: 0;}
    .wdt__topBar .inner .barTxt{color: #191f25; font-size: .32rem; justify-content: center; align-items: center;}
    .wdt__topBar .inner .barTxt .lbl{color: #9ea0a3; display: block; font-size: .2rem;}
    
    /* —— 1、消息模块 */
    /* 消息记录列表 */
    .wdt__recordList ul li{background: #fff; font-family: 'Microsoft Yahei'; padding: .2rem .25rem; position: relative;}
    .wdt__recordList ul li:after{content: ''; background-color: #dcdddd; color: #dcdddd; opacity: .56; height: 1px;width: 100%; position: absolute;left: 0;bottom: 0; transform: scaleY(.5); -webkit-transform: scaleY(.5);}
    .wdt__recordList ul li:last-child:after{display: none;}
    .wdt__recordList ul li .avator{margin-right: .25rem; border-radius: 50%; overflow: hidden; height: .9rem; width: .9rem; position: relative;}
    .wdt__recordList ul li .avator img{border-radius: 50%; height: 100%; width: 100%; object-fit: cover; position: absolute;}
    .wdt__recordList ul li .groups{background: #dcdddd;}


    钉钉办公h5实例|仿钉钉聊天weDingTalk_20180817002157557.jpg
    ——>>>欢迎一起交流学习??QQ:282310962? ? 微信:xy190310

    亚博电竞网网 - 亚博电竞网开发者社区! 来源: - 亚博电竞网开发者社区!

    推荐方案
    评论 1
    打赏楼主 ×
    使用微信打赏! 使用支付宝打赏!

    返回顶部