Question

我需要一些调整建议，因为我不熟悉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需要更改加载通知的方式。但我不知道要编辑什么。请帮忙，因为我想学习这个。

Answer 1

快速而肮脏的方式是致电

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

在你完成所有

之后

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

东西。

Answer 2

我看到该插件只添加了一个click事件监听器。因此，您可以在index.html中假冒点击，在</head>：

之前立即添加此代码

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

它会起作用。

Answer 3

$(document).ready(function(){
    $("#msgup").bar({
        color            : '#1E90FF',
        background_color : '#FFFFFF',
        removebutton     : false,
        message          : 'Your profile customization has been saved!',
        time             : 4000
    });
});

如何在页面加载时加载此jquery通知栏而不是单击按钮？

3 个答案: