实现思路:
框架主页 + 弹出的消息显示页面
框架主页内 通过js定时执行一隐藏按钮的click事件
1、其事件为查询消息表
2、如有新消息 则在框架页弹出消息提示窗口
消息提示窗口 定时自动关闭
1、 其内有 已读 和 删除 及 链接 按钮
2、链接按钮 负责刷新框架面的iframe中的src
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>消息提醒</title>
- </head>
- <body>
- <div id="hd">
- <ul class="panel">
- 收件箱<span data-type="msg">0</span>
- </ul>
- <ul class="panel3">
- 收件箱<span data-type="msg">0</span>
- </ul>
- </div>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
- <script type="text/javascript">
- <!--
- //收件箱
- checkbox = function(url) {
- var box = $('#hd .panel');
- $.getJSON(url, function(data) {
- for (k in data[0]) {
- if (k == 'msg') {
- if (data[0][k] > 0)
- box.find('[data-type=' + k + ']').show().text(data[0][k]);
- else
- box.find('[data-type=' + k + ']').hide();
- }
- }
- });
- setTimeout(function() {
- sbs.checkbox(url)
- }, 10000);
- }
- checkbox3 = function(url) {
- var box = $('#hd .panel3');
- $.getJSON(url, function(data) {
- alert(data[0]['msg']);
- for (k in data[0]) {
- if (k == 'msg') {
- if (data[0][k] > 0)
- box.find('[data-type=' + k + ']').show().text(data[0][k]);
- else
- box.find('[data-type=' + k + ']').hide();
- }
- }
- });
- }
- checkbox('server/msg_count.php');
- checkbox3('server/msg_count.php');
- //-->
- </script>
Java代码
- <?php
- $msgn = array (array ("msg" => 10) );
- echo json_encode ( $msgn );