jquery：Flash 消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2864408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery: Flash messages
提问by Svish
With jQuery, how can I display a flash message at the top of the page in an easy way? Is there something built-in, or a plugin, or is it easy enough to do it yourself?
使用 jQuery，如何以简单的方式在页面顶部显示 Flash 消息？是否有内置的东西，或插件，或者自己做是否足够容易？
What I mean is like after a successful ajax post I would like to just say "hey, it went good" in a non-obtrusive way.
我的意思是，在成功发布 ajax 帖子后，我只想以一种不突兀的方式说“嘿，进展顺利”。
采纳答案by Nick Craver
I would check out the jQuery growl style plugins availableif you're looking for something quick to implement :)
如果您正在寻找快速实现的东西，我会查看可用的jQuery 咆哮样式插件:)
The .ajaxSuccess()would be a good place to run your code, or for errors .ajaxError(), these are some of the global ajax event handlers available, for example:
这.ajaxSuccess()将是运行代码的好地方，或者对于错误.ajaxError()，这些是一些可用的全局 ajax 事件处理程序，例如：
$(document).ajaxSuccess(function() {
//fire success message using the plugin of choice, for example using gritter:
$.gritter.add({
title: 'Save Complete!',
text: 'Your request completed successfully.'
});
});
回答by Brian ONeil
I have used Notify Barto do this also... Really simple to use.
我也使用通知栏来做到这一点...使用起来非常简单。
回答by runxc1 Bret Ferrier
No plugin needed try the following out. It looks a lot like the one here on stackoverflow. You can just pass the html to the function that you want to see
不需要插件试试以下。它看起来很像 stackoverflow 上的那个。您可以将 html 传递给您想要查看的函数
showFlash: function (message) {
jQuery('body').prepend('<div id="flash" style="display:none"></div>');
jQuery('#flash').html(message);
jQuery('#flash').toggleClass('cssClassHere');
jQuery('#flash').slideDown('slow');
jQuery('#flash').click(function () { $('#flash').toggle('highlight') });
},
回答by simplyharsh
It wont be worth using an extra plugin to do it.
使用额外的插件来做到这一点是不值得的。
What we do, is to add a span to a predefined containeror create an absolute positioned divon ajax success and add ajax response message to it. You can further add a self destructive javascript or a "Clear" button in that div to remove it from DOM. JQuery has got good DOM handling capabilities.
我们所做的是向预定义的容器添加一个跨度，或者在 ajax 成功时创建一个绝对定位的 div并向其添加 ajax 响应消息。您可以进一步在该 div 中添加自毁 javascript 或“清除”按钮以将其从 DOM 中删除。JQuery 具有良好的 DOM 处理能力。
As asked, here is one dirty example,
正如所问，这是一个肮脏的例子，
HTML
HTML
<div id="message_container" style="display:none">
<span id="msg"></span>
<a id="clear_ack" href="#"
onclick="$(this).parents('div#message_container').fadeOut(400); return false;">
clear
</a>
</div>
JS
JS
var set_message = function(message){
var container = $('#msg_container');
$(container).find('span#msg').html(message);
$(container).show();
}
var set_counter = function(){
$.ajax({
type: "POST",
url: '/some/url/',
dataType: 'json',
error: function(response){},
success: function(response){
if (responses.message){
set_message(responses.message)
}
}
});
};
回答by Mark Schultheiss
I just added this to my page, displays a loading indicator for each ajax call (no matter where it is on the page)
我刚刚将它添加到我的页面，为每个 ajax 调用显示一个加载指示器（无论它在页面上的哪个位置）
/* Ajax methods */
/* show the message that data is loading on every ajax call */
var loadingMessage = 'Please wait loading data for page...';
$(function()
{
$("#AjaxStatus")
.bind("ajaxSend", function()
{
$(this).text(loadingMessage);
$(this).show();
})
.bind("ajaxComplete", function()
{
$(this).hide();
});
});
And the status:
和状态：
<span id="AjaxStatus" class="ui-state-error-text"></span>
OK, based on your most recent comment, how about this option default message, or complex:
好的，根据你最近的评论，这个选项默认消息怎么样，还是复杂的：
ShowStatus(true, 'Save Failed with unknown Error', 4000);
/* show message for interval */
var saveMessageText = 'Saving...';
function ShowStatus(saveMessage, message, timeInMilliseconds)
{
var errorMessage = $("#Errorstatus");
if (saveMessage)
{
errorMessage.show();
var myInterval = window.setInterval(function()
{
message = message + '...';
errorMessage.text(message);
errorMessage.show();
}, 1000);
window.setTimeout(function()
{
clearInterval(myInterval);
errorMessage.hide();
}, timeInMilliseconds);
}
else
{
errorMessage.text(message);
errorMessage.show();
window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds);
};
};
Snip from jquery ajax:
从 jquery ajax 截图：
success: function(msg)
{
ShowStatus(true, 'Hey it went well', 4000);
Process(msg);
},
failure: function(msg)
{
ShowStatus(true, 'Save Failed with unknown Error', 4000);
}
回答by jigfox
I believe you're looking for something like this: http://projects.zoulcreations.com/jquery/growl/
我相信你正在寻找这样的东西：http: //projects.zoulcreations.com/jquery/growl/
回答by Sean Reifschneider
I ended up using jquery-notice, which is really simple and self-contained. It's MIT licensed, just a zip file with the .js and .css files, and you can call it with something like:
我最终使用了jquery-notice，它非常简单且独立。它是 MIT 许可的，只是一个包含 .js 和 .css 文件的 zip 文件，您可以使用以下内容调用它：
<script type="text/javascript">
$(document).ready( function () {
jQuery.noticeAdd({
text: '${flash_get()}',
stay: true
});
return false;
});
</script>
Though I also liked the solution from @Brian ONeal for Notify Bar, that also looks very simple.
虽然我也喜欢 @Brian ONeal 的Notify Bar解决方案，但这看起来也很简单。
jquery-notice makes a box for each message on the upper right corner of the page. Notify Bar pulls down from the top edge, and includes a few different styles for errors, regular, or success notices.
jquery-notice 在页面右上角为每条消息创建一个框。通知栏从顶部边缘下拉，包括一些不同的错误、常规或成功通知样式。
回答by DANISH TAYYIB
There is not any built-in function for flash message in jquery but you can use fadein()and fadeout()for flash message with setting some time transition.
jquery 中没有任何内置的 flash 消息功能，但您可以使用fadein()和fadeout()设置一些时间转换的 flash 消息。
