将按钮活动脚本更改为onLoad效果
Change button active script to onLoad effect
我有一个简单的代码,当点击特定按钮时,可以在网页的左上角显示一个通知框。
我需要代码可以在网页完全准备好的那一刻显示在通知框中;在同一个地方,用同一个定时器加载。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/ns-default.css" />
<link rel="stylesheet" type="text/css" href="css/ns-style-growl.css" />
<script src="js/modernizr.custom.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="color-9">
<div class="container">
<!-- Top Navigation -->
<div class="main clearfix">
<div class="column">
<button id="notification-trigger" class="progress-button">
<span class="content">Show Notification</span>
<span class="progress"></span>
</button>
</div>
</div>
<!-- Related demos --></div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/notificationFx.js"></script>
<script>
(function() {
var bttn = document.getElementById( 'notification-trigger' );
// make sure..
bttn.disabled = false;
bttn.addEventListener( 'click', function() {
// simulate loading (for demo purposes only)
classie.add( bttn, 'active' );
setTimeout( function() {
classie.remove( bttn, 'active' );
// create the notification
var notification = new NotificationFx({
message : '<p>Hello there! I''m a classic notification but I have some elastic jelliness thanks to <a href="http://bouncejs.com/">bounce.js</a>. </p>',
layout : 'growl',
effect : 'jelly',
type : 'notice', // notice, warning, error or success
onClose : function() {
bttn.disabled = false;
}
});
// show the notification
notification.show();
}, 1200 );
// disable the button (for demo purposes only)
this.disabled = true;
} );
})();
</script>
如果有人能帮我修改代码,请提前感谢。:)
感谢您的帮助。
我已经编辑并找到了一种方法,最后一块编辑在这里:
(function() {
var bttn = document.getElementById( 'notification-trigger' );
// make sure..
bttn.disabled = false;
addEventListener('load',function() {
// create the notification
var notification = new NotificationFx({
message : '<p>Hello there! I''m a classic notification but I have some elastic jelliness thanks to <a href="http://bouncejs.com/">bounce.js</a>. </p>',
layout : 'growl',
effect : 'jelly',
type : 'notice', // notice, warning, error or success
onClose : function() {
bttn.disabled = false;
}
});
// show the notification
notification.show();
}, 1200 );
// disable the button (for demo purposes only)
this.disabled = true;
})();
感谢您的帮助:)现在工作正常。
只需单独声明点击处理程序函数,然后在绑定后即可调用它,而无需触发点击事件,bttn.click()
会这样做。
// Declare handler:
var clickHandler = function (event) {
// Your onclick function
};
bttn.addEventListener( 'click', clickHandler); // Bind handler
clickHandler(); // Fire it immediately
相关文章:
- 为effect Composer创建GodRays效果过程
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- window.onload没有'无法在Android WebView中工作
- jQuery工具验证器自定义效果-添加&消除影响
- JavaScript-动态SVG-onload属性-未触发事件
- 在不移动内部文本的情况下缩放元素的效果
- 在phonegap中为android调用onload函数的最佳方式
- 为图像提供灯箱效果
- image.onload事件和浏览器缓存
- 将函数从onclick修改为onload
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 键控效果,如果在效果完成之前键控,则发出警报
- 如何通过按键激活按钮应用CSS效果
- AngularJS和promise值在调用本地函数时的效果-未定义
- Combine onload, onresize and onclick
- 在这个幻灯片中没有淡出效果JavaScript,CSS和HTML
- 如何在服务、技能、投资组合等方面添加滑动效果
- Jquery onload/text效果后期反应
- 将按钮活动脚本更改为onLoad效果
- 创意加载效果''演示页面加载时的onload