私は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が通知をロードする方法に関して変更が必要であることは確かです。しかし、私は何を編集すべきかわかりません。私はこれを学びたいので助けてください。