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,根据需要调整 :) 这会即时创建一个&lt;div&gt;,将其添加到主体的顶部,因此无需担心时髦的定位,这在 IE6 中应该没问题。完成后,它将向上滑动并删除它为清理而创建的&lt;div&gt;。您可以添加一个点击处理程序以立即将其删除,等等,无论您需要什么。

【讨论】:

啊,效果很好! 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“密码错误”栏?的主要内容,如果未能解决你的问题,请参考以下文章

iOS:是不是可以让应用程序在后台显示在屏幕的顶部区域?

带有标签名称的表单顶部的 Jquery.Validate 错误消息

jQuery - 使用锚链接将元素滚动到屏幕中间而不是顶部

使用 jQuery DataTables 插件,fnAddData() 是不是将行添加到 html 表格的顶部或底部?

如何停止/覆盖 Jquery TimeOut 函数?

使用 jQuery 验证插件显示自定义元素和内容