如何在页面加载时加载此 jQuery 通知栏,而不是单击按钮
how to load this jquery notification bar on page load instead of clicking the button?
我需要一些调整建议,因为我不熟悉JavaScript和jquery。 我想在页面加载时在页面顶部添加通知。 例如,当我加载主页(索引.html)时,我希望显示通知。
当前示例仅在我单击按钮时弹出通知。 我希望它在加载页面时出现。 有人可以帮助我吗? 我对这个通知栏有点兴趣。
我从 http://tympanus.net/Development/jbar/那里得到的
我当前的代码是这样的(索引.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);
我确定索引.html需要更改它如何加载通知。 但我不知道该编辑什么。 请帮忙,因为我想学习这个。
快速而肮脏的方式是调用
$("#msgup").click();
在您完成所有工作之后
$("#msgup").bar({
...
});
东西。
我看到插件只添加了click
事件侦听器。所以你可以在index.html
中伪造点击,在</head>
之前添加以下代码:
<script> $(document).ready(function(){ $("#msgup").trigger('click') }); </script>
它会起作用。
$(document).ready(function(){
$("#msgup").bar({
color : '#1E90FF',
background_color : '#FFFFFF',
removebutton : false,
message : 'Your profile customization has been saved!',
time : 4000
});
});
相关文章:
- 将所选类别循环到ul>李用加载更多按钮
- 单击按钮时加载数据
- 单击按钮更改加载到表中的JSON文件
- 根据页面加载时的单选按钮选择显示某些字段
- 如何根据点击按钮重新加载我的谷歌图表
- 动态生成的html按钮无法加载页面
- jQuery .click 在动态加载按钮上不起作用
- 帧重新加载按钮
- 无法与使用 jQuery 的 jQuery 加载按钮交互
- 每当我按下后退按钮或重新加载按钮时,我的计时器都会重新启动.如何避免这种情况
- 导轨中的拉达加载按钮
- 如何停止页面重新加载按钮点击jquery
- 剑道UI移动加载按钮与javascript
- 如何绑定引导加载按钮成功/错误在表单提交
- Javascript - Won't工作为第二个日期范围/ Won't重新加载按钮按下
- 当用户单击停止加载按钮时发生的任何Javascript事件
- Valums qq.当FileUploader在ajax加载按钮后初始化时,它不工作
- 使用jQuery get动态加载按钮后,部分视图没有得到验证
- SilverStripe前端Ajax博客文章加载'按钮
- 如何通过javascript检测浏览器中是否按下了停止加载按钮