jquery: Wiadomości flash

Question

W jQuery, w jaki sposób mogę w łatwy sposób wyświetlić wiadomość flash w górnej części strony? Czy jest coś wbudowanego lub wtyczka, czy też można to zrobić samodzielnie?

To, co mam na myśli, to jak po udanym poście ajaxowym, chciałbym po prostu powiedzieć "hej, poszło dobrze" w niezłomny sposób.

Answer 1

bym sprawdzeniu jQuery growl style plugins available jeśli szukasz coś szybko wdrożyć :)

.ajaxSuccess() byłby dobrym miejscem do uruchomienia kodu, lub za błędy .ajaxError(), są to jedne z global ajax event handlers available, na przykład:

$(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 2

wierzę szukasz czegoś takiego: http://projects.zoulcreations.com/jquery/growl/

Answer 3

to przyzwyczajenie być warta użyciu dodatkowej wtyczki, aby to zrobić.

Co robimy, jest dodać rozpiętość do predefiniowanej pojemnika lub stworzyć absolutną umieszczony div na ajax sukcesu i dodać komunikat odpowiedzi ajax do niego. Możesz dodać samozniszczeniowy javascript lub przycisk "Wyczyść" w tym dziale, aby usunąć go z DOM. JQuery ma dobre możliwości obsługi DOM.

Gdy zapytałem, tutaj jest jeden brudny przykład,

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 4

Użyłem Notify Bar to zrobić również ... Naprawdę prosty w użyciu.

Answer 5

właśnie dodanych w tym na mojej stronie, wyświetla ładowania wskaźnik dla każdego ajax rozmowy (bez względu na to, gdzie znajduje się na stronie)

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

i status:

<span id="AjaxStatus" class="ui-state-error-text"></span> 

OK, na podstawie Twojego najnowszego komentarza, a co powiesz na temat opcji domyślnej wiadomości lub kompleksu:

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

Snip from jquer y 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

Nie wymaga wtyczki Wypróbuj poniższe. Wygląda bardzo podobnie do tego na stackoverflow. można po prostu przejść html do funkcji, którą chcesz zobaczyć

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 7

skończyło się używając , co jest naprawdę prosty i powściągliwy. To MIT licencjonowany, tylko plik zip z .js i .css plików, można nazwać to coś jak:

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

Choć Podobała mi się również rozwiązanie z @Brian Oneal dla Notify Bar, że również wygląda bardzo prosty.

jquery-notice tworzy pole dla każdej wiadomości w prawym górnym rogu strony. Pasek powiadomień ściąga od górnej krawędzi i zawiera kilka różnych stylów błędów, powiadomień o regularnych lub powodzenia.

Answer 8

W jQuery nie ma żadnej wbudowanej funkcji dla wiadomości flash, ale można użyć wiadomości fadein() i fadeout() dla wiadomości typu flash z ustawianiem przejścia czasowego.