Я искал панель уведомлений, подобную той, которая находится на этом сайте, которая отображается в верхней части, уведомляя пользователя об изменениях и т. Д. Она должна иметь возможность быть закрытой. Все, что я могу найти для jquery: this oneпанели уведомлений jquery, которые могут быть уволены?
Есть ли у кого-нибудь другие рекомендации или предложения?
Супер легко построить свой собственный. Просто сделайте первый <div> под <body> тега и установить CSS на что-то вроде этого:
#notify {
position:relative;
width:100%;
background-color:orange;
height:50px;
color:white;
display:none;
}
Тогда на ваших уведомлений, просто сдвиньте ее вниз:
$('#notify').html('new message').slideDown();
И добавить событие щелчка на закрыть его и очистить уведомление:
$('#notify').click(function(){
$(this).slideUp().empty();
});
Демо: http://jsfiddle.net/AlienWebguy/Azh4b/
Если вы хотите по-настоящему сделать это как StackOverflow, вы просто установите cookie при выпуске уведомления, а затем на каждой странице загрузите все уведомления, в которых есть файлы cookie.
Если вы хотите несколько уведомлений, изменить #notify к .notify и стек Em Up. Что-то вроде этого:
$('.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();
}
Никогда не думал о строительстве собственного ... имеет смысл. Спасибо и благодарю вас за отличный пример :) – Paul
Добро пожаловать, рад помочь :) – AlienWebguy
Я действительно сделал что-то очень похожее на это для нескольких моих проектов.
Существует JSFiddle demo, который работает, но это прямой лифт из моих личных библиотек - код, который, вероятно, может использовать очистку и оптимизацию, но дает хорошее представление о том, как это работает.
Добавленный бонус моего кода заключается в том, что он не показывает повторяющиеся элементы - он «пинги» существующего. Щелчок в любом месте уведомления закрывает его.
Единственный недостаток, который я вижу в этом, заключается в том, что он закрывает некоторые основные материалы, но это исправление, если вы помещаете контейнер уведомлений в верхнюю часть вашего контента с position: static.
Пожалуйста, дайте мне знать, если есть какие-либо особенности, которые вы хотите мне объяснить; в одном ответе есть довольно много кода.
Я, вероятно, напишу плагин jQuery, который делает это в какой-то момент, видя, что есть только один пример. Я отправлю его здесь, когда я это сделаю.
NB. setInterval() используется только в демонстрационных целях. Кроме того, существуют различные цветные предупреждения (успех, информация, предупреждение, ошибка - зеленый, синий, оранжевый и красный соответственно).
Вы можете попробовать "noty" https://github.com/needim/noty
Это * действительно * легко сделать. Даже на этом сайте есть один! – Blender
@Blender: «Даже это» звучит так просто, потому что * даже * Stackoverflow запустил его. –
Большая часть материала на этом сайте довольно минимальная и простая (и, очевидно, хорошо закодированная). – Blender