blocks|key|1246355|text|如果您正在寻找一些快速实现的东西，我可以查看一下jQuery+growl+style+plugins+available+:)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1246356|.ajaxSuccess()将是运行代码的好地方，或者对于errors+.ajaxError()，以下是一些global+ajax+event+handlers+available，例如：|style|CODE|1246357|$(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.'
++});
});|code-block|syntax|javascript|1246358|entityMap|0|LINK|mutability|MUTABLE|url|http://webtoolkit4.me/2009/08/13/jquery-growl-likenotification-systems/|1|http://api.jquery.com/ajaxSuccess/|2|http://api.jquery.com/ajaxError/|3|http://api.jquery.com/category/ajax/global-ajax-event-handlers/^0|O|10|0|0|0|E|10|C|0|E|1|10|C|2|1I|10|3|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@$A|15|B|16|F|G]|$A|17|B|18|F|G]]|9|@$A|19|B|1A|1|1B]|$A|1C|B|1D|1|1E]|$A|1F|B|1G|1|1H]]|C|$]]|$1|H|3|I|5|J|7|1I|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|X]]|Y|$5|P|Q|R|C|$S|Z]]]]

I would check out the <a href="http://webtoolkit4.me/2009/08/13/jquery-growl-likenotification-systems/" rel="noreferrer">jQuery growl style plugins available</a> if you're looking for something quick to implement :)

The <a href="http://api.jquery.com/ajaxSuccess/" rel="noreferrer"><code>.ajaxSuccess()</code></a> would be a good place to run your code, or for errors <a href="http://api.jquery.com/ajaxError/" rel="noreferrer"><code>.ajaxError()</code></a>, these are some of the <a href="http://api.jquery.com/category/ajax/global-ajax-event-handlers/" rel="noreferrer">global ajax event handlers available</a>, for example:

<pre><code>$(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.'
 });
});
</code></pre>

blocks|key|1031359|text|我也使用过Notify+Bar来做这件事。使用起来非常简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1031360|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/dknight/jQuery-Notify-bar^0|5|A|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I have used <a href="https://github.com/dknight/jQuery-Notify-bar" rel="noreferrer">Notify Bar</a> to do this also... Really simple to use.

blocks|key|1031427|text|不需要插件，可以试试下面的方法。它看起来很像stackoverflow上的那个。您只需将html传递给您想要查看的函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1031428|++++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')+});
},|code-block|syntax|javascript|1031429|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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 

<pre><code> showFlash: function (message) {
 jQuery('body').prepend('&lt;div id="flash" style="display:none"&gt;&lt;/div&gt;');
 jQuery('#flash').html(message);
 jQuery('#flash').toggleClass('cssClassHere');
 jQuery('#flash').slideDown('slow');
 jQuery('#flash').click(function () { $('#flash').toggle('highlight') });
},
</code></pre>

blocks|key|1031397|text|我只是将此代码添加到我的页面中，为每个ajax调用显示一个加载指示器(无论它在页面的什么位置)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1031398|/*+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();
++++});
});|code-block|syntax|javascript|1031399|和状态：|1031400|<span+id="AjaxStatus"+class="ui-state-error-text">|1031401|好的，根据你最近的评论，这个选项默认的消息，或者复杂的：|1031402|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+%2B+'...';
++++++++++++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);
++++};
};|1031403|来自jquery+ajax的片段：|1031404|+++success:+function(msg)
++++{
++++++++ShowStatus(true,+'Hey+it+went+well',+4000);
++++++++Process(msg);
++++},

++failure:+function(msg)
++++{
++++++++ShowStatus(true,+'Save+Failed+with+unknown+Error',+4000);
++++}|1031405|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I just added this to my page, displays a loading indicator for each ajax call (no matter where it is on the page)

<pre><code>/* 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();
 });
});
</code></pre>

And the status:

<pre><code>&lt;span id="AjaxStatus" class="ui-state-error-text"&gt;&lt;/span&gt;
</code></pre>

OK, based on your most recent comment, how about this option default message, or complex:

<pre><code>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);
 };
};
</code></pre>

Snip from jquery ajax:

<pre><code> success: function(msg)
 {
 ShowStatus(true, 'Hey it went well', 4000);
 Process(msg);
 },

 failure: function(msg)
 {
 ShowStatus(true, 'Save Failed with unknown Error', 4000);
 }
</code></pre>

blocks|key|1031344|text|我相信你正在寻找类似这样的东西：http://projects.zoulcreations.com/jquery/growl/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1031345|entityMap|0|LINK|mutability|MUTABLE|url|http://projects.zoulcreations.com/jquery/growl/^0|G|1B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I believe you're looking for something like this: <a href="http://projects.zoulcreations.com/jquery/growl/" rel="nofollow noreferrer">http://projects.zoulcreations.com/jquery/growl/</a>

blocks|key|1031466|text|我最终使用了jquery-notice，它非常简单，而且是自包含的。它是麻省理工学院许可的，只是一个包含.js和.css文件的压缩文件，你可以这样调用它：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1031467|<script+type="text/javascript">
++$(document).ready(+function+()+{
++++jQuery.noticeAdd({
++++++++text:+'${flash_get()}',
++++++++stay:+true
++++++++});
++++return+false;
++++});
</script>|code-block|syntax|javascript|1031468|虽然我也喜欢@Brian+ONeal为Notify+Bar提供的解决方案，但它看起来也很简单。|1031469|jquery-注意在页面的右上角为每条消息创建一个框。Notify+Bar从顶部边缘拉下，包括几种不同的错误、常规或成功通知样式。|1031470|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sandbox.timbenniks.com/projects/jquery-notice/|1|https://github.com/dknight/jQuery-Notify-bar^0|6|D|0|0|0|J|A|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

I ended up using <a href="http://www.sandbox.timbenniks.com/projects/jquery-notice/" rel="nofollow">jquery-notice</a>, 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:

<pre><code>&lt;script type="text/javascript"&gt;
 $(document).ready( function () {
 jQuery.noticeAdd({
 text: '${flash_get()}',
 stay: true
 });
 return false;
 });
&lt;/script&gt;
</code></pre>

Though I also liked the solution from @Brian ONeal for <a href="https://github.com/dknight/jQuery-Notify-bar" rel="nofollow">Notify Bar</a>, that also looks very simple.

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.

blocks|key|1246536|text|jquery中没有内置的flash消息函数，但您可以使用fadein()和fadeout()设置一些时间转换来处理flash消息。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1246537|entityMap^0|S|8|11|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

There is not any built-in function for flash message in jquery but you can use <code>fadein()</code> and <code>fadeout()</code> for flash message with setting some time transition.

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?

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.

jquery: Flash messages

jQuery

使用jQuery，我如何在页面顶部轻松地显示一条闪光消息？有没有什么内置的，或者是一个插件，或者它是否足够容易自己来做？我的意思是，就像在一篇成功的ajax帖子之后，我想以一种不引人注目的方式只说“嘿，进展得很好”。

问jquery: Flash消息
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery: Flash消息EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery: Flash消息
EN