zoukankan      html  css  js  c++  java
  • jquery实现的右下角窗口弹窗加定时刷新弹出功能

    收缩时:

    展开时:

    获取数据时:

    引用代码:

    <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了

     下载连接

  • 相关阅读:
    线程正常终止pthread_exit,pthread_join,pthread_kill,pthread_cancel,sigwait,sigaddset
    线程的创建,pthread_create,pthread_self,pthread_once
    线程和进程的关系
    改变进程的优先级,nice,getpriority,setpriority
    setuid和setgid
    等待进程结束wait,waitpid
    执行新程序以及环境变量
    进程退出exit、_exit、abort
    VBA 判断单元格是否为公式,可用于数组
    ADODB 调用存储过程
  • 原文地址:https://www.cnblogs.com/pipizhu/p/1739833.html
Copyright © 2011-2022 走看看