使用HTML / CSS / JavaScript显示Android样式的Toast通知 [英] Show an Android style toast notification using HTML/CSS/JavaScript
本文介绍了使用HTML / CSS / JavaScript显示Android样式的Toast通知的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
通常当您想让使用者知道您使用快讯时，
现在我想这样做，但在一个 Android toast 方式，即一个弹出窗口显示在屏幕上，秒后，自己消失，因此用户不必费心关闭它，如下图所示。
https://i.stack.imgur.com/euFte.pngalt =enter image description here>
解决方案
更容易的方法是做一个持有人你放你的消息。该拥有者将被隐藏。
< div class ='error'style ='display：none'> Event Created< / div>
您添加一些CSS魔术
.error {
width：200px;
height：20px;
height：auto;
position：absolute;
left：50％;
margin-left：-100px;
bottom：10px;
background-color：＃383838;
color：＃F0F0F0;
font-family：Calibri;
font-size：20px;
padding：10px;
text-align：center;
border-radius：2px;
-webkit-box-shadow：0px 0px 24px -1px rgba（56，56，56，1）;
-moz-box-shadow：0px 0px 24px -1px rgba（56，56，56，1）;
box-shadow：0px 0px 24px -1px rgba（56，56，56，1）;
}
然后使用简单的脚本可以显示几秒钟。必要时使用 .stop（）
）.fadeIn（400）.delay（3000）.fadeOut（400）; // 3秒后淡出
$ fadeIn（400）.delay（3000）.fadeOut（400）;}）。 ;
body，html {height：100％ width：100％; min-height：100％; padding：0; margin：0;}。error {width：200px; height：20px; height：auto; position：absolute;左：50％; margin-left：-100px; bottom：10px; background-color：＃383838;颜色：＃F0F0F0; font-family：Calibri; font-size：20px; padding：10px; text-align：center; border-radius：2px; -webkit-box-shadow：0px 0px 24px -1px rgba（56，56，56，1）; -moz-box-shadow：0px 0px 24px -1px rgba（56，56，56，1）; box-shadow：0px 0px 24px -1px rgba（56，56，56，1）;}
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script><div class ='error'style ='display：none'>< / div>< button data-text ='我做了一些事情！'>做某事< / button> pre>
这是一个非常基本的示例，然后可以更改为带有参数的函数， ，持续时间和您可能需要的任何内容。
下面是一个更高级的（不必要的复杂）方式（有点像插件）。 这里也是一个小提琴版本。
（function（$）{$ .fn.aToast = function（options）{var $ this = $（this），settings = $ .extend（{fadeOut：400，fadeIn：400，delay ：3000，text：'Whoops！发生了什么事，我出现了'toastListenEvent：'click'，aClass：false}，options），$ at = false，aTevents = false; settings.toastListenEvent = settings.toastListenEvent +'a -toast'; settings.aClass ='aToast-view-message'+（settings.aClass？''+ settings.aClass：''）if（$（'[data-aToast = true]：not（.aToast-init ）'）。）; $ this = $ this.add（$（'[data-aToast = true]：not（.aToast-init）'）.addClass（'aToast-init'））; function _remove $（this）.stop（）。remove（）; } function _displayDiv（）{$（'。aToast-view-message'）。hide（）; var da = $（this）.data（'atoast-text'）; var $ div = $（'< div />'，{text：da？da：settings.text，class：settings.aClass}）stop（）。fadeIn（settings.fadeIn）.delay ）.fadeOut（settings.fadeOut，_remove）.appendTo（'body'）; } $ this.not（'[data-aToast = false]'）。on（settings.toastListenEvent，_displayDiv）; };}（jQuery））; $（'button'）。aToast（{aClass：'users-dont-care-about-this-class-name'}）; $（'div'）。 'hehe'，toastListenEvent：'mouseenter'，text：'好吧，这不工作'}）; / *或$（）。aToast（{aClass：'users-dont-care-about-this-class- }）;要侦听数据-aToast only * /
body，html {height：100％;宽度：100％; min-height：100％; padding：0; margin：0;}。aToast-view-message {width：200px; height：20px; height：auto; position：absolute;左：50％; margin-left：-100px; bottom：10px; background-color：＃383838;颜色：＃F0F0F0; font-family：Calibri; font-size：20px; padding：10px; text-align：center; border-radius：2px; -webkit-box-shadow：0px 0px 24px -1px rgba（56，56，56，1）; -moz-box-shadow：0px 0px 24px -1px rgba（56，56，56，1）; box-shadow：0px 0px 24px -1px rgba（56，56，56，1）;}
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script> ;<button>这里没有什么< / button>< input type ='button'data-aToast ='true'data-aToast-text ='Hey there。'value ='Woop！'/>< div style = inline-block'>我是一个div！悬停我< / div>
Normally when you would like to make a user aware of something you use an alert.
Now say I would like to do that but in a Android toast like way, namely a popup that shows up on screen but then a few seconds later disappears by itself so the user won't have to bother closing it, like the image below.
How could something like this be achieved in the web?
Note: Doing a touch interface so that's the reason I would like to have it in this way
解决方案
The easier way is to make a holder where you put your message. That holder will be hidden.
<div class='error' style='display:none'>Event Created</div>
You add some CSS magic
.error {
width:200px;
height:20px;
height:auto;
position:absolute;
left:50%;
margin-left:-100px;
bottom:10px;
background-color: #383838;
color: #F0F0F0;
font-family: Calibri;
font-size: 20px;
padding:10px;
text-align:center;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
-moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}
Then with a simple script you can show it for a few seconds. Use .stop() if necessary
$('.error').fadeIn(400).delay(3000).fadeOut(400); //fade out after 3 seconds
$('button').click(function () {
$('.error').text($(this).data('text')).fadeIn(400).delay(3000).fadeOut(400);
});
body, html {
height:100%;
width:100%;
min-height:100%;
padding:0;
margin:0;
}
.error {
width:200px;
height:20px;
height:auto;
position:absolute;
left:50%;
margin-left:-100px;
bottom:10px;
background-color: #383838;
color: #F0F0F0;
font-family: Calibri;
font-size: 20px;
padding:10px;
text-align:center;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
-moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='error' style='display:none'></div>
<button data-text='I did something!'>Do something!</button>
This is a very basic example that can then be changed into a function with parameters which will give the text, color, duration and anything else you may need.
Below a more advanced (unnecessarily complicated) way (kinda like a plugin). Here is also a fiddle version.
(function($) {
$.fn.aToast = function(options) {
var $this = $(this),
settings = $.extend({
fadeOut: 400,
fadeIn: 400,
delay: 3000,
text: 'Whoops! Something happened and I showed up.',
toastListenEvent: 'click',
aClass: false
}, options),
$at = false,
aTevents = false;
settings.toastListenEvent = settings.toastListenEvent + ' a-Toast';
settings.aClass = 'aToast-view-message'
+ (settings.aClass ? ' ' + settings.aClass : '')
if ($('[data-aToast=true]:not(.aToast-init)').length)
$this = $this.add($('[data-aToast=true]:not(.aToast-init)')
.addClass('aToast-init'));
function _remove() {
$(this).stop().remove();
}
function _displayDiv() {
$('.aToast-view-message').hide();
var da = $(this).data('atoast-text');
var $div = $('<div/>', {
text: da ? da : settings.text,
class: settings.aClass
}).stop().fadeIn(settings.fadeIn)
.delay(settings.delay)
.fadeOut(settings.fadeOut, _remove)
.appendTo('body');
}
$this.not('[data-aToast=false]').on(settings.toastListenEvent, _displayDiv);
};
}(jQuery));
$('button').aToast({
aClass: 'users-dont-care-about-this-class-name'
});
$('div').aToast({
aClass: 'hehe',
toastListenEvent: 'mouseenter',
text: 'Okay, this is not working'
});
/* or
$().aToast({
aClass: 'users-dont-care-about-this-class-name'
});
To listen to data-aToast only
*/
body,
html {
height: 100%;
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
.aToast-view-message {
width: 200px;
height: 20px;
height: auto;
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 10px;
background-color: #383838;
color: #F0F0F0;
font-family: Calibri;
font-size: 20px;
padding: 10px;
text-align: center;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
-moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Here goes nothing</button>
<input type='button' data-aToast='true' data-aToast-text='Hey there.' value='Woop!' />
<div style='display:inline-block'>I am a div! Hover me</div>
这篇关于使用HTML / CSS / JavaScript显示Android样式的Toast通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
