jQuery: Сообщения "молния"
С jQuery, как я могу отобразить сообщение "молния" в верхней части страницы в простом способе? Действительно ли там что-то встроено, или плагин, или действительно ли достаточно легко сделать это самостоятельно?
То, что я имею в виду, похоже после успешного сообщения ajax я хотел бы просто сказать "эй, оно пошло хорошее" ненавязчивым способом.
6 ответов
, я бы посмотрел на доступные плагины стиля рычания jQuery , если вы ищете что-то быстрое. реализовать:)
.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.'
});
});
Я также использовал Панель уведомлений , чтобы сделать это ... Очень просто в использовании.
Не стоит использовать для этого дополнительный плагин.
Что мы делаем, так это добавляем диапазон в предопределенный контейнер или создаем блок с абсолютным позиционированием при успешном выполнении 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)
}
}
});
};
Плагин не нужен, попробуйте следующее. Он очень похож на тот, что здесь на 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') });
},
Я только что добавил это на свою страницу, отображает индикатор загрузки для каждого вызова 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);
}
Я думаю, вы ищете что-то вроде этого: http://projects.zoulcreations.com/jquery/growl/