Html模仿Android Toast

仿Android Toast的html的实现

在Android上比较好用的就有一个Toast提示框,今天我们用js在html中模仿这种提示框

目前有两种版本的实现:jQuery版本与纯js版本

jQuery版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var Toast = function (config) {
this.context = config.context == null ? $('body') : config.context;//上下文
this.message = config.message;//显示内容
this.time = config.time == null ? 3000 : config.time;//持续时间
if (!config.left) config.left = '45%';//原来默认left:"50%"
if (!config.top) config.top = '40%';//top:"61.8%"
this.left = config.left;//距容器左边的距离
this.top = config.top;//距容器上方的距离
this.init();
};

var msgEntity;
Toast.prototype = {
//初始化显示的位置内容等
init: function () {
$("#toastMessage").remove();
//设置消息体
var msgDIV = new Array();
msgDIV.push('<div id="toastMessage">');
msgDIV.push('<span>' + this.message + '</span>');
msgDIV.push('</div>');
msgEntity = $(msgDIV.join('')).appendTo(this.context);
//设置消息样式
var left = this.left == null ? this.context.width() / 2 - msgEntity.find('span').width() / 2 : this.left;
var top = this.top == null ? '20px' : this.top;
msgEntity.css({position: 'fixed', top: top, 'z-index': '2000', left: left, 'background-color': 'black', color: 'white', 'font-size': '18px', padding: '10px', margin: '10px'});
msgEntity.hide();
},
//显示动画
show: function () {
msgEntity.fadeIn(this.time / 2);
msgEntity.fadeOut(this.time / 2);
}
};

js版本

此版本是我在写chrome插件的时候根据自己的需求改写的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
var Toast = function (config) {
this.context = config.context == null ? document.body : config.context;//上下文
this.message = config.message;//显示内容
this.time = config.time == null ? 20000 : config.time;//持续时间
if (!config.left) config.left = '63%';//原来默认left:"50%"
if (!config.top) config.top = '10%';//top:"61.8%"
this.left = config.left;//距容器左边的距离
this.top = config.top;//距容器上方的距离
this.init();
};

Toast.prototype = {
//初始化显示的位置内容等
init: function () {
var old=document.getElementById('toastMessage');
if(old){
old.parentNode.removeChild(old);
}
//设置消息体
var msgDIV=document.createElement('div');
msgDIV.id="toastMessage";
msgDIV.innerHTML='<span>' + this.message + '</span>';
this.context.appendChild(msgDIV);

//设置消息样式
var left = this.left == "" ? parseInt(this.context.style.width) / 2 - parseInt(msgDIV.getElementsByTagName('span')[0].style.width)/ 2 : this.left;
var top = this.top == "" ? '20px' : this.top;
msgDIV.style.position="fixed";
msgDIV.style.top=top;
msgDIV.style.zIndex="6000";
msgDIV.style.left=left;
msgDIV.style.backgroundColor="black";
msgDIV.style.color="white";
msgDIV.style.fontSize="18px";
msgDIV.style.padding="10px";
msgDIV.style.margin="10px";
msgDIV.style.display="none";
msgDIV.style.opacity="0.85";
msgDIV.style.borderRadius="10px";
msgDIV.style.maxWidth="32%";
msgDIV.style.whiteSpace="pre-wrap";
msgDIV.style.wordWrap="break-word";
msgDIV.style.wordBreak="keep-all";

var spans=msgDIV.getElementsByTagName('span');
for(var i=0;i<spans.length;i++){
spans[i].style.padding='0';
spans[i].style.margin='0';
spans[i].style.color="white";
spans[i].style.backgroundColor="black";
spans[i].style.fontSize="18px";
spans[i].style.fontFamily="Consolas,微软雅黑";
}
msgDIV.getElementsByTagName('span')[0].style.padding="0";
msgDIV.getElementsByTagName('span')[0].style.margin="0";
var ps=msgDIV.getElementsByTagName('p');
for(var i=0;i<ps.length;i++){
ps[i].style.padding='0';
ps[i].style.margin='0';
ps[i].style.color="white";
ps[i].style.backgroundColor="black";
ps[i].style.fontSize="18px";
ps[i].style.fontFamily="Consolas,微软雅黑";
}
msgDIV.onclick=function(){
msgDIV.style.display="none";
}
},
//显示动画
show: function () {
var msgDIV=document.getElementById('toastMessage');
msgDIV.style.display="block";
setTimeout(function(){
msgDIV.style.display="none";
},this.time);
}
};

值得注意:无论哪一种实现都需要用户根据自己的系统进行修改!