JQuery имеет плагин для отображения “строки сообщений” как панель “неправильного пароля” Твиттера наверху экрана?
Твиттер появится вниз, строка сообщений наверху экрана говорят "Неправильный пароль" и после 10 секунд, это будет скользить и исчезать. Chrome также показывает, "Делают Вы хотите сохранить пароль" окно сообщения с помощью такого пути.
JQuery имеет разъем в уже сделать это? Это также работает в IE 6? Поскольку обычно, дисплей относительно области просмотра (использование position: fixed) не будет работать над IE 6.спасибо.
Обновление: спасибо за хорошие решения - я сознательно хотел, чтобы это работало (1) даже когда пользователь прокрутил вниз страницу, которую это покажет наверху экрана окна и (2) панель могла бы быть выбрана для отображения у основания экрана окна вместо этого (как опция)... и если это работает над IE 6 затем, это еще лучше... бедные программисты в наше время...
2 ответа
Вы можете сделать это с помощью всего нескольких строк кода, как здесь:
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;
}
Вы можете посмотреть рабочую демонстрацию здесь, подправьте по необходимости :) Это создаст
Я поигрался и придумал эту замечательную функцию:
[живой пример на 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>