Web的Popup桌面提醒

时间:2006/5/30 9:40:32      阅读:2904     附件: popup.rar (经验值:0)     下载:169

Web的(Popup)桌面提醒,不错的一个代码,值得收藏(详细代已包括在附件里)

全部代码如下:

  1<style id="popupmanager">
  2.popup{
  3    font-size:9pt;
  4    width: 329px;
  5    height: 74px;
  6    border: 1px solid #0A246A;
  7    filter: Alpha(opacity=80);
  8}
  9.popup td{
 10    font-size:9pt;
 11}
 12.popupCaption{
 13    background-image: url(images/popup_bg_caption.gif);
 14    height: 7px;
 15}
 16.popupCaptionText{
 17    overflow:hidden;
 18    width: 260;
 19    height: 100%;
 20    padding-right: 4px;
 21    padding-top: 4px;
 22    text-decoration: underline;
 23    color: blue;
 24}
 25
 26.popupBody{
 27    background-image: url(images/popup_bg_body.gif);
 28}
 29.popupBodyText{
 30    overflow:hidden;
 31    width: 100%;
 32    height: 100%;
 33    word-break: break-all;
 34    word-wrap :break-word;
 35    line-height: 1.1em;
 36    padding-top: 1px;
 37    text-decoration: underline;
 38    color: blue;
 39}
 40
 41.popupButton{
 42
 43}
 44.popupButtonHover{
 45    background-color: #0A246A;
 46}
 47.popupButtonHover TD{
 48    background-color: #B6BDD2;
 49}
 50
 51.popupMenu{
 52    width: 177px;
 53    border: 1px solid #666666;
 54    background-color: #F9F8F7;
 55    padding: 1px;
 56}
 57.popupMenuTable{
 58    background-image: url(images/popup_bg_menu.gif);
 59    background-repeat: repeat-y;
 60}
 61.popupMenuTable TD{
 62    font-size: 9pt;
 63    cursor: default;
 64}
 65.popupMenuRow{
 66    height: 22px;
 67    padding: 1px;
 68}
 69.popupMenuRowHover{
 70    height: 22px;
 71    border: 1px solid #0A246A;
 72    background-color: #B6BDD2;
 73}
 74.popupMenuSep{
 75    background-color: #A6A6A6;
 76    height:1px;
 77    width: expression(parentElement.offsetWidth-27);
 78    position: relative;
 79    left: 28;
 80}
 81</style>
 82<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 83<script language="JavaScript" type="text/javascript">
 84
 85// 队列
 86function Queue()
 87{
 88    var items = new Array();
 89
 90    var first = 0;
 91    var count = 0;
 92
 93    // 队列大小
 94    // 
 95    this.Count = function()
 96    {
 97        return count;
 98    } ;
 99
100    // 取队列头/尾
101    //
102    this.Peek = function(last)
103    {
104        var result = null;
105
106        if (count > 0)
107        {
108            if (null != last && true == last)
109                result = items[first + (count - 1)];
110            else
111                result = items[first];
112        }
113
114        return result;
115    };
116
117    // 入列
118    // 
119    this.Enqueue = function(x)
120    {
121        items[first + count] = x;
122
123        count++;
124        return x;
125    };
126
127    // 出列
128    //
129    this.Dequeue = function()
130    {
131        var result = null;
132
133        if (count > 0)
134        {
135            result = items[first];
136
137            delete items[first];
138            first++;
139            count--;
140        }
141
142        return result;
143    };
144}
145
146
147var newlineRegExp = new RegExp("(\r\n|\n|\r)", "g");
148
149function NewlineReplace(str)
150{
151    result = "";
152
153    if (str != null)
154        result = str.replace(newlineRegExp, "<br>");
155
156    return result;
157}
158
159var entityList = new Array();
160entityList["<"] = "&lt;";
161entityList["\uff1c"] = "&lt;";
162entityList[">"] = "&gt;";
163entityList["\uff1e"] = "&gt;";
164entityList["&"] = "&amp;";
165entityList["\uff06"] = "&amp;";
166entityList["\""] = "&quot;";
167entityList["\uff02"] = "&quot;";
168
169function EntityReplace(str)
170{
171    var result = "";
172
173    if (str != null)
174    {
175        var len = str.length;
176
177        var i = 0;
178
179        while (i < len)
180        {
181            var j = i;
182
183            var e = entityList[str.charAt(j)];
184
185            while (j < len && null == e)
186            {
187                j++;
188
189                e = entityList[str.charAt(j)];
190            }
191
192            result += str.substr(i, j - i);
193
194            if (e != null)
195            {
196                result += e;
197
198                j++;
199            }
200
201            i = j;
202        }
203    }
204
205    return result;
206}
207
208function GetPopupCssText()
209{
210    var styles = document.styleSheets;
211    var csstext = "";
212    for(var i=0; i<styles.length; i++)
213    {
214        if (styles[i].id == "popupmanager")
215            csstext += styles[i].cssText;
216    }
217    return csstext;
218}
219
220function PopupWin(winID)
221{
222    this.Win = document.getElementById(winID);
223    this.Menu = document.getElementById(winID + "_Menu");
224    this.Icon = document.getElementById(winID + "_Icon");
225    this.MenuButton = document.getElementById(winID + "_MenuButton");
226    this.CloseButton = document.getElementById(winID + "_CloseButton");
227    this.Caption = document.getElementById(winID + "_Caption");
228    this.CaptionText = document.getElementById(winID + "_CaptionText");
229    this.Body = document.getElementById(winID + "_Body");
230    this.BodyText = document.getElementById(winID + "_BodyText");
231}
232
233function Popup(winID, message, icon, title, func)
234{
235    this.PostID;
236    this.URL;
237    this.Type = "Mail";    // Mail,Thread,Post,Message
238    this.win = new PopupWin(winID);
239    this.popup = null;
240    this.popupMenu = null;
241    this.PopupManager = null;
242    this.showTime = null;
243    this.func = func;
244    this.isMouseOver = false;
245    this.CreateBody = Popup_CreateBody;
246    this.Close = Popup_Close;
247    this.Hide = Popup_Hide;
248    this.Show = Popup_Show;
249    this.ShowTime = Popup_ShowTime;
250    this.aspxl = this.CreateBody(message, icon, title);
251}
252
253function Popup_Close()
254{
255    if (this.popup != null)
256        this.popup.document.onmouseover = null;
257    else
258        this.win.Win.onmouseover = null;
259
260    this.isMouseOver = false;
261    this.ShowTime = function()
262    {
263        return 7;
264    }
265
266    this.Hide();
267}
268
269function Popup_Hide()
270{
271    if (this.popup != null && this.popup.isOpen)
272    {
273        this.popup.hide();
274    }
275
276    this.popup = null;
277}
278
279function Popup_ShowTime()
280{
281    var result = null;
282
283    if (this.showTime != null)
284    {
285        var now = new Date();
286
287        result = (now - this.showTime)/1000;
288    }
289
290    return result;
291}
292
293// 
294function OnClickClose_Popup()
295{
296    var p = this.getAttribute("popup");
297    p.Close();
298}
299
300function OnClickMenu_Popup()
301{
302    var p = this.getAttribute("popup");
303    if (p.popupMenu == null)
304    {
305        p.popupMenu = p.popup.document.parentWindow.createPopup(); 
306        var d = p.popupMenu.document;
307        var s = d.createStyleSheet();
308        s.cssText = GetPopupCssText();
309        var b = d.body;
310        b.rightmargin = 0;
311        b.leftmargin = 0;
312        b.topmargin = 0;
313        b.bottommargin = 0;
314        b.innerHTML = p.win.Menu.outerHTML;
315        b.style.cursor = "default";
316        b.oncontextmenu = OnContextMenu_Popup;
317        b.onmouseover = OnMouseOver_PopupMenu;
318        b.onmouseout = OnMouseOut_PopupMenu;
319        b.setAttribute("popup", p);
320        var menuDisable = d.getElementById(p.win.Win.id + "_Menu_Disable");
321        menuDisable.onclick = OnClickDisable_PopupMenu;
322        menuDisable.setAttribute("popup", p);
323        var menuSetting = d.getElementById(p.win.Win.id + "_Menu_Setting");
324        menuSetting.onclick = OnClickSetting_PopupMenu;
325        menuSetting.setAttribute("popup", p);
326    }
327    var toastWidth = p.win.Menu.offsetWidth;
328    var toastHeight = p.win.Menu.offsetHeight;
329    var toastVerticalMargin = 20;
330    var toastHorizontalMargin = 0;
331    p.popupMenu.show(toastHorizontalMargin, -toastVerticalMargin-toastHeight,
332     toastWidth, toastHeight, p.win.MenuButton);
333}
334
335function OnClick_Popup()
336{
337    var p = this.getAttribute("popup");
338
339    if (p != null && p.func != null)
340    {
341        p.func(p);
342    }
343}
344
345function OnClickDisable_PopupMenu()
346{
347    var p = this.getAttribute("popup");
348
349    if (p != null)
350    {
351        p.PopupManager.Disabled = true;
352        p.Close();
353    }
354}
355
356function OnClickSetting_PopupMenu()
357{
358    var url = this.getAttribute("URL");
359    var p = this.getAttribute("popup");
360
361    if (url != null)
362    {
363        window.open(url);
364        if (p != null)
365        {
366            p.Close();
367        }
368    }
369}
370
371function OnContextMenu_Popup()
372{
373    var p = this.getAttribute("popup");
374    p.Close();
375}
376
377function OnMouseOver_Popup()
378{
379    var p = this.getAttribute("popup");
380    p.isMouseOver = true;
381}
382
383function OnMouseOut_Popup()
384{
385    var p = this.getAttribute("popup");
386    p.isMouseOver = false;
387}
388
389function OnMouseOver_PopupMenu()
390{
391    var p = this.getAttribute("popup");
392    p.isMouseOver = true;
393}
394
395function OnMouseOut_PopupMenu()
396{
397    var p = this.getAttribute("popup");
398    p.isMouseOver = false;
399}
400
401function Popup_Show()
402{
403    this.showTime = new Date();
404    this.popup = window.createPopup();
405    var d = this.popup.document;
406
407    //    d.createStyleSheet("CSS/style.css");
408    var s=d.createStyleSheet();
409    s.cssText = GetPopupCssText();
410    var b = d.body;
411    b.rightmargin = 0;
412    b.leftmargin = 0;
413    b.topmargin = 0;
414    b.bottommargin = 0;
415    b.innerHTML = this.aspxl;
416    b.style.cursor = "default";
417    b.oncontextmenu = OnContextMenu_Popup;
418    b.onmouseover = OnMouseOver_Popup;
419    b.onmouseout = OnMouseOut_Popup;
420    b.setAttribute("popup", this);
421    var closeButton = d.getElementById(this.win.Win.id + "_CloseButton");
422    closeButton.onclick = OnClickClose_Popup;
423    closeButton.setAttribute("popup", this);
424
425    var menuButton = d.getElementById(this.win.Win.id + "_MenuButton");
426    menuButton.onclick = OnClickMenu_Popup;
427    menuButton.setAttribute("popup", this);
428
429    var popupMessage = d.getElementById(this.win.Win.id + "_BodyText");
430    popupMessage.style.cursor = "hand";
431    popupMessage.onclick = OnClick_Popup;
432    popupMessage.setAttribute("popup", this);
433    var toastWidth = this.win.Win.offsetWidth;
434    var toastHeight = this.win.Win.offsetHeight;
435    var toastVerticalMargin = 28;
436    var toastHorizontalMargin = 16;
437    var screenWidth = window.screen.width;
438    var screenHeight = window.screen.height;
439    this.popup.show(screenWidth - toastWidth - toastHorizontalMargin,
440     screenHeight - toastHeight - toastVerticalMargin,
441                    toastWidth,                                       toastHeight);
442
443}
444
445function Popup_CreateBody(msg, icon, title)
446{
447    if (icon != null && icon != "")
448        this.win.Icon.src = icon;
449    this.win.BodyText.innerHTML = NewlineReplace(EntityReplace(msg));;
450    this.win.CaptionText.innerHTML = title;
451    var win = this.win.Win.cloneNode(true);
452    win.style.display = "";
453    return win.outerHTML;
454}
455
456
457function PopupManager()
458{
459    var queue = new Queue();
460    this.Disabled = false;
461
462    var canShow = (window.createPopup != null);
463    this.Heartbeat = function()
464    {
465        if (queue.Count() > 0)
466        {
467            var p = queue.Peek();
468
469            var delta = p.ShowTime();
470
471            if (delta == null)
472            {
473                if (!this.Disabled)
474                    p.Show();
475            }
476            else if ((p.popup == null) || (!p.popup.isOpen) || (!p.isMouseOver && delta >= 7))
477            {
478                p.Hide();
479
480                queue.Dequeue();
481            }
482        }
483    }
484
485    this.AddPopup = function(winid, message, icon, title, func)
486    {
487        var result = null;
488        do
489        {
490            if (canShow)
491            {
492                result = new Popup(winid, message, icon, title, func);
493                result.PopupManager = this;
494
495                queue.Enqueue(result);
496                this.Heartbeat();
497            }
498        }
499        while (false);
500
501        return result;
502    }
503}
504
505
506</script>
507<table id="popupWin" class="popup" cellspacing="0" cellpadding="0" border="0"
508 onselectstart="return false;" ondragstart="return false;" style="display:;">
509    <tr class="popupCaption" id="popupWin_Caption">
510        <td align="center"><img src="images/popup_caption.gif" border="0" alt="" /></td>
511    </tr>
512    <tr class="popupBody" id="popupWin_Body">
513        <td valign="top">
514            <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
515                <tr>
516                    <td align="center" valign="top" width="46"
517                     style="padding-top: 2px;width:46px;" nowrap>
518                        <img src="images/popup_icon_mail.gif" border="0"
519                         alt="" id="popupWin_Icon"/>
520                    </td>
521                    <td>
522                        <table cellspacing="0" cellpadding="0" border="0"
523                         width="100%" height="100%">
524                            <tr height="18">
525                                <td valign="bottom"><div id="popupWin_CaptionText"
526                                 class="popupCaptionText">title1</div></td>
527                                <td align="right" width="18">
528                                    <table cellspacing="1" cellpadding="0"
529                                     border="0" width="18" height="18"
530                                     class="popupButton"
531                                      onmouseover="this.className='popupButtonHover';"
532                                      onmouseout="this.className='popupButton';"
533    onmousedown="var img=this.rows[0].cells[0].children[0];img.src=img.src.replace('_black','_white');"
534    onmouseup="var img=this.rows[0].cells[0].children[0];img.src=img.src.replace('_white','_black');"
535                                         id="popupWin_MenuButton">
536                                        <tr>
537                                            <td align="center">
538                                            <img src="images/popup_icon_arrow_black.gif"
539                                             border="0" alt="" /></td>
540                                        </tr>
541                                    </table>
542                                </td>
543                                <td align="right" width="18">
544                                    <table cellspacing="1" cellpadding="0" border="0" width="18" 
545                                    height="18" class="popupButton"
546                                     onmouseover="this.className='popupButtonHover';"
547                                      onmouseout="this.className='popupButton';"
548                                      id="popupWin_CloseButton">
549                                        <tr>
550                                            <td align="center">
551                                            <img src="images/popup_icon_close.gif"
552                                             border="0" alt="" /></td>
553                                        </tr>
554                                    </table>
555                                </td>
556                            </tr>
557                            <tr>
558                                <td colspan="2" valign="top">
559                                <div id="popupWin_BodyText" class="popupBodyText">
560                                
561                                </div>
562                                </td>
563                            </tr>
564                            <tr height="8">
565                                <td/>
566                                <td/>
567                            </tr>
568                        </table>
569                    </td>
570                </tr>
571            </table>
572        </td>
573    </tr>
574</table>
575
576<div class="popupMenu" id="popupWin_Menu">
577    <table cellspacing="0" cellpadding="0" border="0" width="100%"
578     height="100%" class="popupMenuTable">
579        <tr height="22">
580            <td class="popupMenuRow" onmouseover="this.className='popupMenuRowHover';"
581             onmouseout="this.className='popupMenuRow';" id="popupWin_Menu_Disable">
582                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
583                    <tr>
584                        <td width="28">&nbsp;</td>
585                        <td><span>Disable Popup</span></td>
586                    </tr>
587                </table>
588            </td>
589        </tr>
590        <tr height="3">
591            <td>
592                <div class="popupMenuSep"><img height="1px"></div>
593            </td>
594        </tr>
595        <tr height="22">
596            <td class="popupMenuRow" onmouseover="this.className='popupMenuRowHover';"
597             onmouseout="this.className='popupMenuRow';"
598             id="popupWin_Menu_Setting" URL="/User/EditProfile.aspx?ReturnUrl=/driver.aspx">
599                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
600                    <tr>
601                        <td width="28">&nbsp;</td>
602                        <td><span>Popup Setting</span></td>
603                    </tr>
604                </table>
605            </td>
606        </tr>
607    </table>
608</div>
609
610<script>
611var popupManager = new PopupManager();
612window.setInterval("popupManager.Heartbeat();", 1500);    // 更新
613var p = popupManager.AddPopup("popupWin", "My PM Content", "", "My PM Subject", func);
614p.PostID = 1;
615p = popupManager.AddPopup("popupWin", "New Post Content1",
616 "images/popup_icon_Post.gif", "New Post Subject1", func);
617p.PostID = 2;
618p = popupManager.AddPopup("popupWin", "New Post Content2",
619 "images/popup_icon_Post.gif", "New Post Subject2", func);
620p.PostID = 3;
621
622function func(popup)
623{
624    alert("PostID:" + popup.PostID)
625}
626</script>
627
评论
  • Re:Web的Popup桌面提醒  (2007/11/27 9:05:03) by bokecn 
    Re:Web的Popup桌面提醒
标 题:
 
姓 名:
 
主 页:

验证码:

评论:
 

Because of the cache,you may see your comments several minutes later.