0

我正在使用一些代码来显示通知消息。下面的代码显示了按钮单击时的消息。有什么方法可以在页面加载时显示消息，我打算使用“类型”作为变量来在消息之间进行选择。

对此的任何帮助将不胜感激。谢谢

完整代码可在以下位置找到：

http://www.red-team-design.com/cool-notification-messages-with-css3-jquery#comment-168574

<head>
<title>Cool notification messages with CSS3 & Jquery demo - Redteamdesign</title>
<script src="../js/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../css/bar.css">
<script>
var myMessages = ['info','warning','error','success']; // define the messages types      
function hideAllMessages()
{
     var messagesHeights = new Array(); // this array will store height for         each
     for (i=0; i<myMessages.length; i++)
     {
              messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
              $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport     
     }
}
function showMessage(type)
{

$('.'+ type +'-trigger').click(function(){
      hideAllMessages();                  
      $('.'+type).animate({top:"0"}, 500);
});
}
$(document).ready(function(){
     // Initially, hide them all
     hideAllMessages();
     // Show message
     for(var i=0;i<myMessages.length;i++)
     {
        showMessage(myMessages[i]);
     }
     // When message is clicked, hide it
     $('.message').click(function(){              
              $(this).animate({top: -$(this).outerHeight()}, 500);
      });
      setTimeout(function(){hideAllMessages()},4000);        
});      
</script>
</head>
<body>
<div class="info message">
     <h3>FYI, something just happened!</h3>
     <p>This is just an info notification message.</p>
</div>
<div class="error message">
     <h3>Oh No!, an error ocurred</h3>
     <p>This is just an error notification message.</p>
</div>
<div class="warning message">
     <h3>Wait, I must warn you!</h3>
     <p>This is just a warning notification message.</p>
</div>
<div class="success message">
     <h3>Congrats, you did it!</h3>
     <p>This is just a success notification message.</p>
</div>
<ul id="trigger-list">
     <li><a href="#" class="trigger info-trigger">Info</a></li>
     <li><a href="#" class="trigger error-trigger">Error</a></li>
     <li><a href="#" class="trigger warning-trigger">Warning</a></li>
     <li><a href="#" class="trigger success-trigger">Success</a></li>
</ul>


</body>
4

4 回答 4

2

是的，使用：

window.onload = function( ){
 SomeJavaScriptCode
};

并将其放在<head>文档的<script>标签内。

于 2013-03-04T16:10:37.850 回答
2

您不能有多个 body 标签。摆脱页面底部的开始正文标签。

当 body 像这样加载时，您可以调用一个函数：

<body onload="someFunction();">

或者只是从你的内部调用函数$(document).ready()

someFunction();

您还可以使用在元素上trigger模拟（或其他）：click

$('.message').trigger('click');
于 2013-03-04T16:15:08.553 回答
2

为了满足您的特定要求（立即显示消息而无需等待按下按钮），您可以在准备功能的末尾添加它（就在 之后setTimeout(function(){hideAllMessages()},4000);）

var type="warning";
$('.'+type).animate({top:"0"}, 500);

您可以将“警告”替换为“信息”、“错误”或“成功”（或您希望添加的任何其他内容）。

于 2013-03-04T17:36:43.037 回答
0

问题是该showMessage()函数实际上并没有显示消息，它只是为具有相应类的元素（如 .info-trigger）创建一个事件处理程序。我修改了那部分代码，现在就像一个魅力。:)

工作小提琴：http: //jsfiddle.net/MC7Fu/

附加说明：请不要使用内联事件处理程序，例如<body onload="someFunc()">. 使用 Husman 推荐的一款。

window.onload = function( ){
 SomeJavaScriptCode
};
于 2013-03-04T17:38:44.527 回答