библиотека jQuery: Флэш-сообщения

с jQuery, как я могу отобразить флэш-сообщение в верхней части страницы простым способом? Есть ли что-то встроенное или плагин, или это достаточно легко сделать самостоятельно?

Я имею в виду, что после успешного сообщения ajax я хотел бы просто сказать "Эй, все прошло хорошо" не навязчивым образом.

18
jquery messagebox

8 ответов

Я бы проверил доступны Плагины стиля 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.'
  });
});
6

Я использовал Уведомления Бар для этого тоже... Очень проста в использовании.

11

не требуется плагин попробуйте следующее. Он очень похож на тот, что здесь, на 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') });
},
6

для этого не стоит использовать дополнительный плагин.

что мы делаем, - это добавить span заранее контейнер или создать абсолютный позиционированный div об успехе ajax и добавьте к нему ответное сообщение ajax. Вы можете добавить саморазрушительный javascript или кнопку "Очистить" в этом div, чтобы удалить его из 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)
              }
           }
       });
};
3

Я только что добавил Это на свою страницу, отображает индикатор загрузки для каждого вызова 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>

OK, основываясь на вашем последнем комментарии, как насчет этого сообщения по умолчанию или сложного:

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

Я считаю, что вы ищете что-то вроде этого:http://projects.zoulcreations.com/jquery/growl/

0

Я в конечном итоге с помощью jquery-обратите внимание, который действительно прост и самодостаточен. Это лицензия MIT, просто zip-файл с этим .js and .css файлы, и вы можете вызвать его с чем-то вроде:

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

хотя мне также понравилось решение от @Brian ONeal для Уведомления Бар, что также выглядит очень просто.

jquery-notice создает поле для каждого сообщения в правом верхнем углу страницы. Панель Notify тянет вниз от верхнего края, и включает в себя несколько различных стилей для ошибок, регулярных или успешных уведомлений.

0

в jquery нет встроенной функции для flash-сообщения, но вы можете использовать fadein() и fadeout() для flash-сообщения с настройкой некоторого временного перехода.

-1