专栏首页h5h5移动端智慧办公项目案例
原创

h5移动端智慧办公项目案例

h5开发的微信端智慧办公——weDingTalk项目,运用到了html5+css3+jquery+swiper+wcPop等技术进行开发,其中wcPop.js弹窗插件又进行了一次全面升级(新增全屏弹窗),另外项目中多处应用到了Material Design波纹效果,很多地方的1px进行了细化处理。

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 = [
			'<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];
	}
});

// ...拆开红包功能
$(".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;}
/* __ 消息提示(圆点) - px */
/* .wdt__badge{background-color: #f25643; border-radius: 18px; color: #fff; display: inline-block; font-size: 12px; font-family: arial; text-align: center; padding: 0 4px; line-height: 14px; min-width: 8px; vertical-align: middle;}
.wdt__badge-dot{padding: 5px; min-width: 0;} */
/* __ 消息提示(圆点) - rem */
.wdt__badge{background-color: #f25643; border-radius: .4rem; color: #fff; display: inline-block; font-size: .22rem; font-family: arial; text-align: center; padding: 0 .08rem; line-height: .32rem; min-width: .32rem; vertical-align: middle;}
.wdt__badge-dot{border-radius: 50%; padding: 0; height: .1458rem; line-height: 0; min-width: 0; width: .1458rem;}
  • ——>>>欢迎一起交流学习  QQ:282310962    微信:xy190310

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 支付宝小程序弹窗插件开发|仿微信/android/ios弹窗效果

    支付宝小程序弹窗交互组件和微信小程序弹窗功能都差不多,对功能有比较多的限制,尤其想要实现丰富一些的弹窗场景就只能自己写组件实现了。

    andy2018
  • h5高仿微信web网页版|仿微信聊天项目

    https://blog.csdn.net/xiaoyan_2015/article/details/81750894

    andy2018
  • 微信小程序自定义模态弹窗(wcPop)|多种弹窗样式

    在平时微信小程序开发中,弹窗应用场景还是蛮广泛的,如果你刚好项目开发中用到的话,希望对你有用~

    andy2018
  • codeblocks文件读取之后,在输出中文时会乱码

    本来没打算写这个文,但是帮助我的大佬说可以写,正好也帮助一下可能出现这个问题的小可爱们

    阿湫
  • PHPMyAdmin4.8.1任意文件读取漏洞复现

    第58行限制 target 参数不能出现在 $target_blacklist 内

    墙角睡大觉
  • 【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

    原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“...

    寒月十八
  • Spring Security:自定义登录认证

    “在昨天的文章中,我们使用Spring Boot实现了一个Security的应用,但是其中登录的方式和密码都是框架中自带的,今天我们来看一下如何自定义登录认证”...

    每天学Java
  • 浅看社会工程学

    所以需要的练习实践比较多,而且需要的知识也是比较多的,下面说明一下需要学习和锻炼的能力等。

    周俊辉
  • Linux 和 Windows PowerShell 常用工具/命令 记录

    enca: http://dl.cihar.com/enca/   文件名编码转换 iconv: 文件编码转换 convmv: 文件名编码转换 ldd: ...

    owent
  • OPPO手机怎么设置双时钟

    男朋友出差海外,此刻想念的叨扰是否会打扰他甜蜜的美梦?设置双时钟,看一下它的时间不就好了。

    互动20

扫码关注云+社区

领取腾讯云代金券