Js添加消息提示数量
接到个新需求,类似以下这种需求,得把它封装成一个插件
后端给返回一个这种数据
var data = [
{
key:"020506",
num:5
},
{
key:"03",
num:2
}
];
key:
02:表示第一层,0205:表示第二层,020506:第三层
如果第三层有新消息,则它本身和它上面的层级都需要显示提示,并显示数量,另外,后端将需要添加提示的元素,都加上了data-newinfo属性,里面的值是它当前的层级。
num:
消息提示的数量
一些注意点
var newinfo = document.createElement('newinfo');
原本想创建一个span元素,但想想还是不太行,因为对应的那个页面很有可能设置了span的样式,而我们是不希望这样的,因此创建了一个特别的元素。
/*
使用说明:
data:数据
setInfo():将消息提示添加到页面中
new NewInfo(data).setInfo();
------------------------------------
<div data-newinfo="020505"></div>
var data = [
{
key:"020506",
num:5
},
{
key:"03",
num:2
}
];
*/
function NewInfo(data){
this.data = data;
// 获取所有需要添加新消息提示的元素
this.newinfoDoms = Array.prototype.slice.call(document.querySelectorAll("[data-newinfo]"));
// 样式
this.sty = "padding: 2px 5px;background-color: red;border-radius: 100%;color: #fff;font-size: 12px;vertical-align: 4px;line-height:1;";
}
NewInfo.prototype = {
// 获取所需的信息
getInfo:function(){
var _this = this;
var arr = [];
this.newinfoDoms.forEach(function(item,index){
var isTrue = true;
_this.data.forEach(function(item2,index){
var isNewInfo = item2.key.substring(0,item.dataset.newinfo.length)===item.dataset.newinfo;
if(isNewInfo&&item.dataset.newinfo){
if(isTrue){
arr.push({
'item':item,
'num':item2.num
});
}else{
arr[arr.length-1].num += item2.num;
}
isTrue = false;
}
});
});
return arr;
},
// 添加到相应的页面中
setInfo:function(){
var _this = this;
var arr = this.getInfo();
arr.forEach(function(current,index){
var newinfo = document.createElement('newinfo');
newinfo.style.cssText = _this.sty;
if(current.num>0){
newinfo.innerHTML = current.num;
}else{
newinfo.style.paddingTop = '0';
newinfo.style.paddingBottom = '0';
}
current.item.appendChild(newinfo);
})
}
};
效果
Js添加消息提示数量的更多相关文章
- 【源码解读】js原生消息提示插件
效果如下: 关闭message后前后message的衔接非常丝滑,这部分是我比较感兴趣的.带着这个问题先了解下DOM结构,顺便整理下作者的思路. 从DOM里我们可以看到所有的message都在一个容器 ...
- 自定义iOS 中推送消息 提示框
看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...
- js消息提示框插件-----toastr用法
(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...
- ymPrompt.js消息提示组件
转载:https://www.cnblogs.com/linzheng/archive/2010/11/15/1878058.html 使用说明: 1.在页面中引入ymPrompt.js.如:< ...
- 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知
需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...
- 基于jquery的消息提示框toastr.js
//消息提示全局配置 toastr.options = { "closeButton": false,//是否配置关闭按钮 "debug": false,//是 ...
- 消息提示插件toastr.js与Messenger组件
Toastr是一款基于jQuery的通知插件,可以灵活的自定义样式和拓展其功能! toastr是一个基于Jquery简单.漂亮的消息提示插件,使用简单.方便,可以根据设置的超时时间自动消失. cdn最 ...
- JS~Boxy和JS模版实现一个标准的消息提示框
面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...
- 微信小程序之----消息提示框toast
toast toast为消息提示框,无按钮,如需关闭弹框可以添加事件设置hidden为true,在弹框显示后经过duration指定的时间后触发bindchange绑定的函数. 官方文档 .wxml ...
随机推荐
- 使用Android Butterknife
我之前浏览过android butterknife 的使用 在android studio 中,很惊喜,已经成为一个插件来使用 这个android butterknife 最大的用处,就是直接生成la ...
- 第一天ci框架开发商城1
ci框架开发商城1 1/28/2016 9:43:52 PM userguide删除 system application controllers 控制器 models 模型 views 视图 模板 ...
- 在HTML中使用JavaScript元素
script属性<script async = async charset="utf-8" defer="defer" src="index.h ...
- Asia Hong Kong Regional Contest 2016
A. Colourful Graph 可以在$2n$步之内实现交换任意两个点的颜色,然后就可以构造出方案. #include <bits/stdc++.h> using namespace ...
- 转:Webpack 指南(整理 草稿)
基础 安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm.用 npm 全局安装 Webpack: $ npm install webpack -g 通常我们会将 Webpa ...
- asp.net中用cookie记住密码上次不用登陆
------最佳解决方案--------------------写入CookieResponse.Cookies["UserName"].Value = "用户名&quo ...
- 关于html5新增的功能(百度)
HTML5包含以下新增和更新功能: 1. 新增了一种HTML文档类型:<DOCTYPE html> 2. 新增了一些结构化标记的元素(<header>,<nav> ...
- 【OAuth2.0】Spring Security OAuth2.0篇之初识
不吐不快 因为项目需求开始接触OAuth2.0授权协议.断断续续接触了有两周左右的时间.不得不吐槽的,依然是自己的学习习惯问题,总是着急想了解一切,习惯性地钻牛角尖去理解小的细节,而不是从宏观上去掌握 ...
- javascript模块化编程(三):require.js用法
本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...
- Python之路【第五篇】python基础 之初识函数(一)和文件管理
转载请注明出处http://www.cnblogs.com/wupeiqi/articles/5453708.html 函数 一.背景 ...