如何加載頁面加載此jquery通知欄而不是點擊按鈕？

我需要一些調整建議，因爲我不熟悉JavaScript和jQuery。我想在加載時在我的頁面頂部添加通知。例如，當我加載我的主頁（index.html）我想通知出現。如何加載頁面加載此jquery通知欄而不是點擊按鈕？

當前示例僅在單擊按鈕時彈出通知。我希望它在我加載頁面時出現。有人可以幫我嗎？即時通訊有點在這個通知欄感興趣。

我當前的代碼是這樣（的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需要改變它如何加載通知。但我不知道要編輯什麼。請幫助，因爲我想了解這一點。

來源

2012-04-16 Psychocryo

@Dasarp im抱歉，請您詳細說明一下嗎？我真的不熟悉這一點。很抱歉。 – Psychocryo 2012-04-16 04:51:30

的快速和骯髒的方法是調用

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

你做所有的

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

東西之後。

來源

2012-04-16 04:59:53 Cameron

Thnx。我認爲這也是假裝點擊一個頁面加載＃$ msgup權利，因爲它有一個點擊事件監聽器？但它工作.thnx。 – Psychocryo 2012-04-16 05:09:02

它的工作，但我想刪除按鈕，因爲我不需要它..我可以做到這一點？因爲它叫#msgup – Psychocryo 2012-04-16 05:17:54

@Psychocryo：是的，它只是觸發點擊。至於你的第二個問題，你可以設置它的CSS顯示屬性爲none，例如'#msgup {display：none; }'在一個css文件中。雖然，現在我們正走向愚蠢的道路去哈克維爾。也許最好是提取插件的功能以獲得您想要的行爲（即，顯示負載消息幾秒鐘後消失）。起初可能需要一段時間才能熟悉jQuery和所有這些內容，但前期的一點努力將爲您節省大量時間！ – Cameron 2012-04-16 05:42:20

-1

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

來源

2012-04-16 04:50:39 Dasarp

thnx但我應該在哪裏呢？我仍然需要使用「#msgup」？ – Psychocryo 2012-04-16 04:53:24

它不這樣工作。閱讀插件文件。 – 2012-04-16 04:55:44

我看到插件只添加了一個click事件監聽器。所以，你可以在假一index.html點擊，立即添加以下代碼</head>前：

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

，它會工作。

來源

2012-04-16 04:55:08

因爲他沒有在文檔頭中加載jQuery庫，所以不會像寫入那樣工作，但這是一個簡單的修復方法。 – Cameron 2012-04-16 05:01:43

是的。起初它沒有工作，然後我加載jQuery的第一個像@Cameron說，它的工作！ – Psychocryo 2012-04-16 05:07:15

如何加載頁面加載此jquery通知欄而不是點擊按鈕？

回答

相關問題