Non jQuery ha un plugin per visualizzare una “barra dei messaggi”, come la barra di Twitter “password errata” nella parte superiore dello schermo?
-
24-10-2019 - |
Domanda
Twitter apparirà in basso una barra di messaggio nella parte superiore dello schermo diciamo "Password errata" e dopo 10 secondi, si farà scorrere e scomparire. Chrome anche spettacoli "Vuoi salvare la password" finestra di messaggio utilizzando questo modo.
non jQuery hanno un plug-in per farlo già? Funziona anche in IE 6? Perché di solito, la visualizzazione di relativa alla finestra (usando position: fixed
) non funziona su IE 6. Grazie.
Aggiornamento: grazie per le soluzioni piacevoli - ho deliberatamente voluto che il lavoro (1), anche quando l'utente ha fatto scorrere in basso nella pagina, che verrà visualizzato nella parte superiore dello schermo finestra e (2) la barra potrebbe essere scelto alla visualizzazione nella parte inferiore dello schermo della finestra, invece (come opzione) ... e se funziona su IE 6, allora è ancora meglio ... programmatori poveri al giorno d'oggi ...
Soluzione
Si può fare questo con poche righe di codice, in questo modo:
function topBar(message) {
$("<div />", { 'class': 'topbar', text: message }).hide().prependTo("body")
.slideDown('fast').delay(10000).slideUp(function() { $(this).remove(); });
}
Poi basta dare alla classe di usare un po 'di stile, per esempio:
.topbar {
background: #990000;
border-bottom: solid 2px #EEE;
padding: 3px 0;
text-align: center;
color: white;
}
È possibile visualizzare un lavoro demo qui , Tweak se necessario :) Questo crea una <div>
sul volare, aggiunge alla parte superiore del corpo, in modo che nessun posizionamento funky di cui preoccuparsi, questo dovrebbe essere più che bene in IE6. Quando è finito Sarà slideUp e rimuovere il <div>
è creato per la pulizia. È possibile aggiungere un gestore di clic per rimuoverlo immediatamente, ecc, qualunque siano le vostre esigenze sono.
Altri suggerimenti
Beh ho giocato intorno e si avvicinò con questa bella funzione:
[esempio in diretta su 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);
}
Esempio:
$(".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>