jquery：闪存消息

Question

使用 jQuery，我怎样才能以简单的方式在页面顶部显示一条 flash 消息？是否有内置的东西，或插件，或者自己做很容易？

我的意思是在一个成功的 ajax 帖子之后，我只想以一种不突兀的方式说“嘿，它很顺利”。

Answer 1

我也使用Notify Bar 来做这件事......真的很容易使用。

Answer 2

如果您正在寻找可以快速实施的东西，我会查看 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.'
  });
});

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') });
},

Answer 4

使用额外的插件是不值得的。

我们所做的是将跨度添加到预定义的容器或创建绝对定位的 div 在 ajax 成功时并向其添加 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)
              }
           }
       });
};

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);
    }

Answer 6

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

Answer 7

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

Answer 8

jquery 中没有内置的 flash 消息功能，但您可以使用 fadein() 和 fadeout() 设置时间转换的 flash 消息。