2

我需要一些调整建议，因为我不熟悉 javascript 和 jquery。我想在页面加载时在页面顶部添加通知。例如，当我加载我的主页（index.html）时，我希望出现通知。

当前示例仅在我单击按钮时弹出通知。我希望它在我加载页面时出现。有人可以帮我吗？我对这个通知栏有点兴趣。

我从http://tympanus.net/Development/jbar/得到它

我当前的代码是这样的（index.html）：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery Plugin jBar</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
    </head>
    <body>
        <div class="content">           
                <a id="msgup" class="button">Demo Top</a>
        </div>


    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script src="jquery.bar.js" type="text/javascript"></script>
    <script>
        $("#msgup").bar({
            color            : '#1E90FF',
            background_color : '#FFFFFF',
            removebutton     : false,
            message          : 'Your profile customization has been saved!',
            time             : 4000
        });
    </script>   
    </body>
</html>

和 jquery.bar.js 文件：

    (function($) {

    $.fn.bar = function(options) {
        var opts = $.extend({}, $.fn.bar.defaults, options);
        return this.each(function() {
            $this = $(this);
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            $this.click(function(e){
                if(!$('.jbar').length){
                    timeout = setTimeout('$.fn.bar.removebar()',o.time);
                    var _message_span = $(document.createElement('span')).addClass('jbar-content').html(o.message);
                    _message_span.css({"color" : o.color});
                    var _wrap_bar;
                    (o.position == 'bottom') ? 
                    _wrap_bar     = $(document.createElement('div')).addClass('jbar jbar-bottom'):
                    _wrap_bar     = $(document.createElement('div')).addClass('jbar jbar-top') ;

                    _wrap_bar.css({"background-color"   : o.background_color});
                    if(o.removebutton){
                        var _remove_cross = $(document.createElement('a')).addClass('jbar-cross');
                        _remove_cross.click(function(e){$.fn.bar.removebar();})
                    }
                    else{               
                        _wrap_bar.css({"cursor" : "pointer"});
                        _wrap_bar.click(function(e){$.fn.bar.removebar();})
                    }   
                    _wrap_bar.append(_message_span).append(_remove_cross).hide().insertBefore($('.content')).fadeIn('fast');
                }
            })


        });
    };
    var timeout;
    $.fn.bar.removebar  = function(txt) {
        if($('.jbar').length){
            clearTimeout(timeout);
            $('.jbar').fadeOut('fast',function(){
                $(this).remove();
            });
        }   
    };
    $.fn.bar.defaults = {
        background_color    : '#FFFFFF',
        color               : '#000',
        position            : 'top',
        removebutton        : true,
        time                : 5000  
    };

})(jQuery);

我确定 index.html 需要更改它如何加载通知。但我不知道要编辑什么。请帮忙，因为我想学习这个。

4

3 回答 3

4

快速而肮脏的方法是打电话

$("#msgup").click();

在你做完你所有的事情之后

$("#msgup").bar({
  ...
});

东西。

于 2012-04-16T04:59:53.430 回答
1

我看到插件只添加了一个click事件监听器。所以你可以假装点击，在index.html之前添加这段代码</head>：

   <script> $(document).ready(function(){ $("#msgup").trigger('click') }); </script>

它会起作用。

于 2012-04-16T04:55:08.470 回答
-1 
$(document).ready(function(){
    $("#msgup").bar({
        color            : '#1E90FF',
        background_color : '#FFFFFF',
        removebutton     : false,
        message          : 'Your profile customization has been saved!',
        time             : 4000
    });
});
于 2012-04-16T04:50:39.280 回答