jQuery 是不是有插件可以在屏幕顶部显示“消息栏”,例如 Twitter“密码错误”栏?
Posted
技术标签:
【中文标题】jQuery 是不是有插件可以在屏幕顶部显示“消息栏”,例如 Twitter“密码错误”栏?【英文标题】:Does jQuery have a plugin to display a "message bar" like the Twitter "wrong password" bar at the top of screen?jQuery 是否有插件可以在屏幕顶部显示“消息栏”,例如 Twitter“密码错误”栏? 【发布时间】:2011-02-28 08:38:13 【问题描述】:Twitter 会在屏幕顶部弹出一个消息栏,说“密码错误”,10 秒后,它会向上滑动并消失。 Chrome 也使用这种方式显示“是否要保存密码”消息框。
jQuery 是否已经有插件可以做到这一点?它也适用于 IE 6 吗?因为通常情况下,相对于视口的显示(使用position: fixed
)在 IE 6 上不起作用。谢谢。
更新:感谢您提供的出色解决方案——我特意希望它能够工作 (1) 即使用户向下滚动页面,它也会显示在窗口屏幕的顶部,并且(2) 栏可能被选择显示在窗口屏幕的底部(作为一个选项)......如果它在 IE 6 上工作,那就更好了......现在可怜的程序员......
【问题讨论】:
IE6 已经有十年历史了 您的意思是这样的吗:tympanus.net/jbar 或者您的意思是与 twitter 的样式完全相同? 那一定是15行代码,也许不值得一个插件;-) @Tom - 我同意...除非您需要 IE6 支持,在这种情况下它会更长,但我仍然不会使用...我有对当前项目的错误产生同样的影响,甚至不是 3 行代码。 @Nick 是的,类似。另外,如果它可以向下滑动,并且在栏向下滑动时可以选择向下推页面内容,那就太好了。 【参考方案1】:您只需几行代码即可完成此操作,如下所示:
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;
You can view a working demo here,根据需要调整 :) 这会即时创建一个<div>
,将其添加到主体的顶部,因此无需担心时髦的定位,这在 IE6 中应该没问题。完成后,它将向上滑动并删除它为清理而创建的<div>
。您可以添加一个点击处理程序以立即将其删除,等等,无论您需要什么。
【讨论】:
啊,效果很好! with 1 catch...如果它在其他页面中,页面长度超过 1 个屏幕高度并且用户向下滚动,则该栏会弹出,但用户将无法看到它。 @Jian - 在这种情况下,你必须决定你想要哪个......最好是修复它或向下滑动页面,而不是两者,尽管有可能,确实你不希望它推送页面吗? IE6 有多重要? (如果需要额外的代码来支持它,两种方式都会有同样的问题) @Jian - 这是一个选项,只需将它们滚动到顶部即可查看错误:jsfiddle.net/qezPE/3 这似乎在 IE 中不起作用。为了让它工作,我必须删除“类”,然后改用 jQuery addClass 函数。我认为 IE 将类视为保留字。 @John - 尝试将class
括在引号中,例如"class": 'topbar'
,解决了吗?【参考方案2】:
好吧,我玩了一下,想出了这个不错的功能:
[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>
【讨论】:
以上是关于jQuery 是不是有插件可以在屏幕顶部显示“消息栏”,例如 Twitter“密码错误”栏?的主要内容,如果未能解决你的问题,请参考以下文章
带有标签名称的表单顶部的 Jquery.Validate 错误消息