jquery实现的右下角窗口弹窗加定时刷新弹出功能
2010-05-20 10:33 cnb_mtime 阅读(4529) 评论(6) 编辑 收藏 举报收缩时：
展开时：
获取数据时：
引用代码：
<link rel="stylesheet" type="text/css" href="/PopWin/PopWinStyleSheet.css" />
<script type="text/javascript" src="/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript"> var clearcookie = true;</script><%--默认主页需要加上这一句，其余页面不加--%>
<script type="text/javascript" src="/PopWin/PopWinJScript.js"></script>
js文件：
代码
1 document.writeln(" <div id=\"floatBox\" class=\"floatBox\">");
2 document.writeln(" <div class=\"title\">");
3 document.writeln(" <h4>");
4 document.writeln(" 通知");
5 document.writeln(" <\/h4>");
6 document.writeln(" <h5>");
7 document.writeln(" <img id=\"ajaxloadimg\" style=\"display: none;\" alt=\"ajax-loading\" src=\"\/PopWin\/image\/popwin_loading.gif\" \/><\/h5>");
8 document.writeln(" <span>关闭<\/span><\/div>");
9 document.writeln(" <div class=\"content\">");
10 document.writeln(" <ul>");
11 document.writeln(" <\/ul>");
12 document.writeln(" <\/div>");
13 document.writeln(" <\/div>");
14
15 //---------------------------------------------------
16
17
18 /*
19 <link rel="stylesheet" type="text/css" href="/PopWin/PopWinStyleSheet.css" />
20
21 <script type="text/javascript" src="/js/jquery-1.4.1.min.js"></script>
22
23 <script type="text/javascript" src="/js/jquery.cookie.js"></script>
24
25 <script type="text/javascript"> var clearcookie = true;</script><%--默认主页需要加上这一句，其余页面不加--%>
26
27 <script type="text/javascript" src="/PopWin/PopWinJScript.js"></script>
28 */
29
30 var cookie;//全局
31 var ajaxflag = true;//是否开启发送功能
32
33 //关闭层
34 var closeDiv = function() {
35 $("#floatBox .title span").text("展开").attr("title", "展开");
36 setCookie('close');
37 getCookie();
38 $("#floatBox").animate({
39 height: '30px'
40 }, 500, 'linear', function() { $("#floatBox .content").hide(); });
41 }
42 //展开层，同时发送ajax请求
43 var openDiv = function() {
44 ajaxLoad();
45 $("#floatBox .title span").text("关闭").attr("title", "关闭");
46 setCookie('open');
47 getCookie();
48 $("#floatBox").animate({
49 height: '200px'
50 }, 500, 'linear', function() { $("#floatBox .content").show(); });
51 }
52
53 //开启定时不能用这个函数，那啥，因为要定时，所以需要重新绑定不过我一直没搞出来，下面那个方法还是很好用的--~！
54 //function divHidden1() {
55 // $("#floatBox .title span").toggle(openDiv, closeDiv)
56 //}
57 //function divHidden2() {
58 // $("#floatBox .title span").toggle(closeDiv, openDiv)
59 //}
60
61 //手动实现上面的层展开关闭的交互操作
62 function divHidden() {
63 $("#floatBox .title span").click(function() {
64 if (cookie == null || cookie == "close") {
65 openDiv();
66 }
67 else {
68 closeDiv();
69 }
70 });
71 }
72 //读取cookie
73 function getCookie() {
74 cookie = $.cookie('DIVSETING');
75 }
76 //设置cookie
77 function setCookie(seting) {
78 var date = new Date();
79 date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000));
80 $.cookie('DIVSETING', seting, { path: '/', expires: date });
81 return false;
82 }
83 //初始窗口状态
84 function setDivState() {
85 if (cookie == null || cookie == "close") {
86 $("#floatBox .title span").text("展开").attr("title", "展开");
87 } else {
88 openDiv();
89 }
90 divHidden();
91 }
92 //设置目标窗口url，这个不用看
93 function switchWindow(_top, _left, _right, _middle) {
94 var top = _top.split("|");
95 self.top.frames[0].ShowDiv(top[0], top[1], top[2], top[3], top[4]);
96 self.top.frames[1].location.href = _left;
97 //self.top.frames[3].location.href = _middle;
98 }
99 //打开窗口
100 function setAjaxWinState() {
101 if (cookie == null || cookie == "close") {
102 openDiv();
103 } else {
104 ajaxLoad();
105 }
106 }
107 //异步获取数据
108 function getDataByAjax() {
109 if (ajaxflag) {
110 setAjaxWinState()
111 }
112 }
113 function ajaxLoad() {
114 $.ajax({
115 url: "/PopWin/PopWinHandler.ashx?action=getpopdata",
116 type: 'get',
117 beforeSend: function(XMLHttpRequest) {
118 $('#ajaxloadimg').show();
119 },
120 success: function(data, textStatus) {
121 $('.floatBox .content ul').html("");
122 $('.floatBox .content ul').append(data);
123 },
124 error: function(XMLHttpRequest, textStatus) {
125 $('.floatBox .content ul').html("");
126 $('.floatBox .content ul').text(XMLHttpRequest.responseText);
127 },
128 complete: function(XMLHttpRequest, textStatus) {
129 $('#ajaxloadimg').hide();
130 }
131 });
132 }
133
134 $(function() {
135 //ajaxflag = false;//是否开启定时获取数据
136 getCookie();//判断是否是第一次加载，因为项目要求在默认进入页面要弹窗，其余页面读取用户设置，然后定时弹窗
137 if (typeof (clearcookie) != "undefined" && clearcookie == true) {
138 openDiv();
139 divHidden();
140 } else {
141 setDivState();
142 }
143 setInterval("getDataByAjax();", 600000);
144 });
145
后台自己返回就是了，现在返回html格式的就ok了
