jQuery: 闪现消息

Question

使用jQuery，如何以简单的方式在页面顶部显示闪现消息？是否有内置的方法或插件，或者自己做是否足够简单？

我的意思是，在成功的ajax提交后，我想以不显眼的方式说“嘿，它很好”。

- Svish

---

根据您的评论，我在我的答案中添加了另一个选项，您可以从任何地方调用它。如果您需要其他帮助，请发表评论。 - Mark Schultheiss

Answer 1

我也使用了Notify Bar来实现这个功能，使用起来非常简单。

- Brian ONeil

Answer 2

我建议您查看可用的jQuery growl样式插件，如果您想要快速实现某些内容 :) .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.'
  });
});

- Nick Craver

Answer 3

不需要插件，可以尝试以下方法。它看起来很像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') });
},

- runxc1 Bret Ferrier

---

但是有没有一种方法可以访问Rails的flash_notice内容并将其插入到message中？ - Archonic

Answer 4

使用额外的插件来完成这项任务是不值得的。

我们所做的是在ajax成功后向预定义容器添加一个，或创建一个绝对定位的

并将ajax响应消息添加到其中。您还可以在该

中添加自毁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)
              }
           }
       });
};

- simplyharsh

---

你能给我一些代码示例，展示如何实现这个功能吗？我对jQuery还不太熟悉 :) - Svish

Answer 5

我刚刚将这个添加到我的页面上，为每个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);
    }

- Mark Schultheiss

---

已经做了同样的事情，但是使用了动画图标。我所说的消息不是在进行中显示的东西，而是从调用返回的答复中得到的消息。 - Svish

根据您的评论添加了一个新的部分。您甚至可以将其称为ajax进程的一部分，在期间、成功时和之后发送不同的消息。 - Mark Schultheiss

Answer 6

最终我使用了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会在页面右上角为每条消息制作一个框。Notify Bar从顶部边缘下拉，并包括一些不同的样式，用于错误、常规或成功通知。

- Sean Reifschneider

Answer 7

我相信你正在寻找这样的东西：http://projects.zoulcreations.com/jquery/growl/

- jigfox

Answer 8

jQuery 中没有任何内置的闪存消息函数，但您可以使用 fadein() 和 fadeout() 来设置一些时间转换来实现闪存消息。

- DANISH TAYYIB