jQueryには、画面上部にTwitterの「パスワードが間違っています」バーのような「メッセージバー」を表示するプラグインはありますか?

Question

Twitter では、画面上部に「パスワードが間違っています」というメッセージ バーがポップアップ表示され、10 秒後にスライドして消えます。Chromeでもこのような方法で「パスワードを保存しますか？」というメッセージボックスが表示されます。

jQuery にはそれを行うためのプラグインがすでにありますか?IE6でも動きますか？通常、ビューポートを基準にして表示されるため (使用 position: fixed) は IE 6 では動作しません。ありがとう。

アップデート： 素晴らしい解決策をありがとう -- 私は意図的にそれが機能するようにしたかったのですが、(1) ユーザーがページを下にスクロールしたときでも、ウィンドウ画面の上部に表示され、(2) ウィンドウ画面の上部に表示されるバーが選択される可能性があります。代わりにウィンドウ画面の下部 (オプションとして)...それが IE 6 で動作すれば、さらに良くなります...最近の貧しいプログラマーは...

Answer 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;
}​

ここで動作デモをご覧いただけます, 、必要に応じて調整します:) これにより、 <div> その場でボディの上部に追加するため、おかしな位置を心配する必要はありません。IE6 ではこれで問題ありません。完了したらスライドアップして削除します。 <div> クリーンアップのために作成されました。必要に応じて、クリック ハンドラーを追加して即座に削除するなどのことができます。

Answer 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>