Есть ли в jQuery плагин для отображения «панели сообщений», например панели «неправильный пароль» в Твиттере, в верхней части экрана?
-
24-10-2019 - |
Вопрос
В верхней части экрана Twitter появится панель сообщений с надписью «Неверный пароль», и через 10 секунд она поднимется вверх и исчезнет.Chrome также показывает окно сообщения «Хотите ли вы сохранить пароль?» таким образом.
Есть ли у jQuery плагин для этого?Это также работает в IE 6?Поскольку обычно отображение относительно области просмотра (с использованием position: fixed
) не будет работать в IE 6.Спасибо.
Обновлять: спасибо за хорошие решения - я сознательно хотел, чтобы это работало (1) даже когда пользователь прокручивал страницу вниз, чтобы оно отображалось в верхней части экрана окна и (2) панель могла быть выбрана для отображения в верхней части экрана. вместо этого нижняя часть окна (как опция)...а если на IE 6 работает, то еще лучше...бедные программисты в наше время...
Решение
Вы можете сделать это с помощью всего нескольких строк кода, например:
function topBar(message) {
$("<div />", { 'class': 'topbar', text: message }).hide().prependTo("body")
.slideDown('fast').delay(10000).slideUp(function() { $(this).remove(); });
}
Затем просто укажите классу, который вы используете, какой-нибудь стиль, например:
.topbar {
background: #990000;
border-bottom: solid 2px #EEE;
padding: 3px 0;
text-align: center;
color: white;
}
Вы можете просмотреть рабочую демо-версию здесь, настройте по мере необходимости :) Это создаст <div>
на лету добавляет его в верхнюю часть тела, так что не стоит беспокоиться о странном позиционировании, в IE6 все должно быть в порядке.Когда он закончится, он сдвинется вверх и удалит <div>
он создан для очистки.Вы можете добавить обработчик кликов, чтобы мгновенно удалить его и т. д., каковы бы ни были ваши потребности.
Другие советы
Ну, я играл вокруг и придумал эту хорошую функцию:
Живой пример на http://jsfiddle.net/2arvf/ ]
//
// Usage: sendMessage(message, yes_text, no_text, class_to_style, callback_yes, callback_no) -- for yes/no
// or: sendMessage(message, class_to_style[, timeout]) -- informative with optional auto-hide after timeout
//
var sendMessage = function(str,yes,no,my_class,callback_yes,callback_no) {
clearMessageTimeout(); // clear the timeout so it doesn't accidentaly slide up
if (typeof no == 'string') { // check if this is a yes/no message
$message.slideUp(0, function() { // slide up if not already
// scroll to the top so the user gets to see the message
$("html").animate({'scrollTop': 0}, 'fast', function() { // then
$message
.unbind('mouseout').attr('class','') // kill old classes
.addClass(my_class) // add our class styling
.html([ str, '<br />', // create an array to add our
// two handlers with #yes and #no IDs
'<button id="yes">', yes ,'</button>',
'<button id="no">' , no ,'</button>'
].join('') // join the array and
) // insert message
.slideDown(1000) // slide the message down
.find('#yes,#no') // find #yes and #no
.click(function() { // add click handler to #yes and #no
var answer=$(this).attr('id'); // should be 'yes' or 'no'
$message.slideUp(1000, function() { // slide up and
$("html").animate({'scrollTop': 0}, // scroll to top again and
eval('callback_' + answer) // call our callback
);
});
});
});
});
} else {
$message
.unbind('mouseout') // unbind previous mouseout
.attr('class','') // kill old classes
.addClass(yes) // add our class
.html(str) // insert our message
.slideDown(1000, function() { // slide down the message
$message.mouseout(function() { // bind mouse out
setMessageTimeout(function() { // with a timeout if the pointer comes back
$message.slideUp(1000); // to slide back up
}, 1000); // after 1 second
});
});
if (typeof no == 'number') { // if a timeout is specified
setMessageTimeout(function() { // then it sets it
$message.slideUp(1000); // to slide up by itself
}, no); // after x milliseconds
}
}
}
// Initialize messenger
$("<div></div>").prependTo('body').attr('id','message');
var $message = $("#message")
.mousemove(clearMessageTimeout),
message_timeout;
function setMessageTimeout(callback, time) {
clearTimeout(message_timeout);
message_timeout = setTimeout(callback, time);
}
function clearMessageTimeout() {
clearTimeout(message_timeout);
}
Пример:
$(".invoke_message").click(function(e) {
sendMessage(
[ 'Here I am, a message..',
'I can be multiline',
'<strong>and have any html</strong>',,
'Do you like me?'
].join('<br />'),
'Yeap','Nope', // yes and no text
'normal', // normal class
function() { // yes callback
sendMessage('Thank you. I\'ll be gone in 3 secs', 'happy', 3000);
},
function() { // no callback
sendMessage('OK, have it your way then. You need to mouseout me to make me leave', 'sad');
}
);
return false;
});
CSS:
body {
padding:0;
margin:0;
}
strong {
font-weight:bold;
}
#message {
color:#fff;
text-align:center;
}
.normal {
background-color:#888;
}
.happy {
background-color:#cc2;
}
.sad {
background-color:#b44;
}
HTML:
<p>I'm the main page. I'll do some space if there is a message</p>
<p><a class="invoke_message" href="#">Click me</a></p>
.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br /><p><a class="invoke_message" href="#">Click me too</a></p>