一日三省吾身

博客园 首页 联系 订阅 管理

实现思路:
框架主页 + 弹出的消息显示页面
框架主页内 通过js定时执行一隐藏按钮的click事件
1、其事件为查询消息表 
2、如有新消息 则在框架页弹出消息提示窗口


消息提示窗口 定时自动关闭
1、 其内有 已读 和 删除 及 链接 按钮

2、链接按钮 负责刷新框架面的iframe中的src 

 

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8" />
    5.         <title>消息提醒</title>
    6. </head>
    7. <body>
    8. <div id="hd">
    9. <ul class="panel">
    10.            收件箱<span data-type="msg">0</span>
    11. </ul>
    12. <ul class="panel3">
    13.            收件箱<span data-type="msg">0</span>
    14. </ul>
    15. </div>
    16. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    17. <script type="text/javascript">
    18. <!--
    19. //收件箱
    20. checkbox = function(url) {
    21.         var box = $('#hd .panel');
    22.         $.getJSON(url, function(data) {
    23.                 for (k in data[0]) {
    24.                         if (k == 'msg') {
    25.                                 if (data[0][k] > 0)
    26.                                         box.find('[data-type=' + k + ']').show().text(data[0][k]);
    27.                                 else
    28.                                         box.find('[data-type=' + k + ']').hide();
    29.                         }
    30.                 }
    31.         });
    32.         setTimeout(function() {
    33.                 sbs.checkbox(url)
    34.         }, 10000);
    35. }
    36. checkbox3 = function(url) {
    37.         var box = $('#hd .panel3');
    38.         $.getJSON(url, function(data) {
    39.                 alert(data[0]['msg']);
    40.                 for (k in data[0]) {
    41.                         if (k == 'msg') {
    42.                                 if (data[0][k] > 0)
    43.                                         box.find('[data-type=' + k + ']').show().text(data[0][k]);
    44.                                 else
    45.                                         box.find('[data-type=' + k + ']').hide();
    46.                         }
    47.                 }
    48.         });
    49. }
    50. checkbox('server/msg_count.php');
    51. checkbox3('server/msg_count.php');
    52. //-->
    53. </script>

Java代码

  1. <?php 
  2.         $msgn = array (array ("msg" => 10) );
  3.         echo json_encode ( $msgn );

 

posted on 2016-11-29 09:29  一日三省吾身  阅读(249)  评论(0编辑  收藏  举报