Панели уведомлений jquery, которые могут быть уволены?

Я искал панель уведомлений, такую ​​как на этом сайте, которая отображается в верхней части, уведомляя пользователя об изменениях и т.д. Она должна иметь возможность быть закрытой. Все, что я могу найти для jquery, этот

Есть ли у кого-нибудь другие рекомендации или предложения?

Ответы

Ответ 1

Супер легко создавать свои собственные. Просто сделайте его первым <div> под тегом <body> и установите css примерно так:

#notify {
    position:relative;
    width:100%;
    background-color:orange;
    height:50px;
    color:white;
    display:none;
}

Затем в ваших уведомлениях просто сдвиньте его вниз:

$('#notify').html('new message').slideDown();

И добавьте событие click, чтобы закрыть его и удалить уведомление:

$('#notify').click(function(){
    $(this).slideUp().empty();
});

Демо: http://jsfiddle.net/AlienWebguy/Azh4b/

Если вы хотите по-настоящему сделать это как StackOverflow, вы просто установите cookie при выпуске уведомления, а затем на каждой загрузке страницы будут отображаться все уведомления, в которых есть файлы cookie.

Если вы хотите несколько уведомлений, измените #notify на .notify и соедините их. Что-то вроде этого:

$('.notify').live('click',function() {
    $(this).slideUp('fast',function(){$(this).remove();});
});

$(function(){
    notify('You have earned the JQuery badge!');
    notify('You have earned the Super Awesome badge!');
});

function notify(msg) {
    $('<div/>').prependTo('body').addClass('notify').html(msg).slideDown();
}

Демо: http://jsfiddle.net/AlienWebguy/5hjPY/

Ответ 2

На самом деле я сделал что-то очень похожее на пару моих проектов.

Там есть JSFiddle demo, которая работает, но это прямой подъем из моих личных libs - кода, который, вероятно, может использовать очистку и оптимизацию, но это дайте хорошее представление о том, как это работает.

Добавленный бонус моего кода заключается в том, что он не отображает повторяющиеся элементы - он "пинги" существующего в настоящее время. Щелчок в любом месте уведомления закрывает его.

Единственный недостаток, который я вижу для этого, заключается в том, что он закрывает часть основного содержимого, но может быть исправлен, если вы помещаете контейнер уведомлений в верхнюю часть вашего контента с помощью position: static.

Пожалуйста, дайте мне знать, есть ли какие-либо особенности, которые вы хотите мне объяснить; там довольно много кода для выполнения в одном ответе.

Я, вероятно, напишу плагин jQuery, который сделает это в какой-то момент, увидев, что есть только один пример. Я отправлю его здесь, когда я это сделаю.

NB. setInterval() используется только для демонстрационных целей. Кроме того, существуют различные цветные предупреждения (успех, информация, предупреждение, ошибка - зеленый, синий, оранжевый и красный соответственно).