使用jQuery，如何以简单的方式在页面顶部显示flash消息？有没有内置的东西，或插件，或者它是否足够容易自己做？
我的意思是，在成功的ajax帖子之后，我想以一种非突兀的方式说“嘿，它变好了”。
如果你正在寻找快速实施的东西，我会查看jQuery growl style plugins available :)
.ajaxSuccess()将是运行代码的好地方，或者是错误.ajaxError()，这些是一些global ajax event handlers available，例如：
$(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.'
});
});
我也用过Notify Bar这样做......真的很简单。
没有插件需要尝试以下方法。它看起来很像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') });
},
它不值得使用额外的插件来做到这一点。
我们所做的是将span添加到预定义的容器中，或者在ajax成功时创建一个绝对定位的div，并向其添加ajax响应消息。您可以在该div中进一步添加自毁javascript或“清除”按钮，以将其从DOM中删除。 JQuery具有良好的DOM处理能力。
如上所述，这是一个肮脏的例子，
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
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)
}
}
});
};
我刚刚将它添加到我的页面，显示每个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();
});
});
状态：
<span id="AjaxStatus" class="ui-state-error-text"></span>
好的，根据您最近的评论，此选项默认消息或复杂的信息如何：
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);
};
};
从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);
}
我相信你正在寻找这样的东西：http://projects.zoulcreations.com/jquery/growl/
我最终使用的是jquery-notice，它非常简单且独立。它是MIT许可的，只是一个包含.js和.css文件的zip文件，您可以使用以下内容调用它：
<script type="text/javascript">
$(document).ready( function () {
jQuery.noticeAdd({
text: '${flash_get()}',
stay: true
});
return false;
});
</script>
虽然我也很喜欢@Brian ONeal为Notify Bar提供的解决方案，但这看起来也很简单。
jquery-notice为页面右上角的每条消息创建一个框。通知栏从顶部边缘拉下来，并包含一些不同的样式，用于错误，常规或成功通知。
在jquery中没有任何内置的flash消息功能，但你可以使用fadein()和fadeout()来设置一些时间转换。