[转]MSN消息提示类(纯js编写)

  1  < script language = " JavaScript " >    
  2  <!--    
  3     
  4  /*    
  5  **    ==================================================================================================   
  6  **    类名：CLASS_MSN_MESSAGE   
  7  **    功能：提供类似MSN消息框   
  8  **    示例：   
  9      ---------------------------------------------------------------------------------------------------   
 10     
 11              var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈");   
 12                  MSG.show();   
 13     
 14      ---------------------------------------------------------------------------------------------------   
 15  **    作者：ttyp   
 16  **    邮件：ttyp@21cn.com   
 17  **    日期：2005-2-1   
 18  **    ==================================================================================================   
 19  * */    
 20     
 21     
 22  /*    
 23   *    消息构造   
 24    */    
 25  function  CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action)   
 26  {   
 27       this .id      =  id;   
 28       this .title   =  title;   
 29       this .caption =  caption;   
 30       this .message =  message;   
 31       this .target  =  target;   
 32       this .action  =  action;   
 33       this .width   =  width ? width: 200 ;   
 34       this .height  =  height ? height: 120 ;   
 35       this .timeout =   3000 ;   
 36       this .speed   =   20 ;  
 37       this .step    =   1 ;  
 38    
 39       this .left    =   0 ;  
 40       this .right   =  screen.availWidth  - 1 ;   
 41       this .top     =   0 ;  
 42       this .bottom  =  screen.availHeight;  
 43       this .autoHideTimeOut  =   0 ; 
 44  }   
 45     
 46  /*    
 47   *    隐藏消息方法   
 48    */    
 49  CLASS_MSN_MESSAGE.prototype.hide  =   function ()   
 50  {   
 51       if ( this .onunload())       
 52      {   
 53           this .Pop.hide();   
 54           if ( this .timer)   
 55          {   
 56              window.clearInterval( this .timer);   
 57          }   
 58      }   
 59  }   
 60     
 61  /*    
 62   *    消息卸载事件，可以重写   
 63    */    
 64  CLASS_MSN_MESSAGE.prototype.onunload  =   function ()   
 65  {   
 66       return   true ;   
 67  }   
 68  /*    
 69   *    消息命令事件，要实现自己的连接，请重写它   
 70   *   
 71    */    
 72  CLASS_MSN_MESSAGE.prototype.oncommand  =   function ()   
 73  {   
 74      alert( this .message);   
 75       this .hide();   
 76  }   
 77     
 78  /*    
 79   *    消息显示方法   
 80    */    
 81  CLASS_MSN_MESSAGE.prototype.show  =   function ()   
 82  {   
 83       var  oPopup  =  window.createPopup();  // IE5.5+   
 84     
 85       this .Pop  =  oPopup;   
 86     
 87       var  w  =   this .width;   
 88       var  h  =   this .height;   
 89     
 90       var  str  =   " <DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH:  "   +  w  +   " px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT:  "   +  h  +   " px; BACKGROUND-COLOR: #c9d3f3'> "    
 91          str  +=   " <TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0> "    
 92          str  +=   " <TR> "    
 93          str  +=   " <TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD> "    
 94          str  +=   " <TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'> "   +   this .caption  +   " </TD> "    
 95          str  +=   " <TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19> "    
 96          str  +=   " <SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD> "    
 97          str  +=   " </TR> "    
 98          str  +=   " <TR> "    
 99          str  +=   " <TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height= "   +  (h - 28 )  +   " > "    
100          str  +=   " <DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'> "   +   this .title  +   " <BR><BR> "    
101          str  +=   " <DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=true id='btCommand'><FONT color=#ff0000> "   +   this .message  +   " </FONT></A></DIV> "    
102          str  +=   " </DIV> "    
103          str  +=   " </TD> "    
104          str  +=   " </TR> "    
105          str  +=   " </TABLE> "    
106          str  +=   " </DIV> "    
107     
108      oPopup.document.body.innerHTML  =  str;   
109     
110       var  docWidth     =   this .right;   
111       var  docHeight    =   this .bottom - h;   
112       var  offset       =  screen.height  -  screen.availHeight;   
113    
114       var  me           =   this ;   
115       var  timer;   
116    
117       var  fun  =   function ()   
118      {   
119          oPopup.show(docWidth - w, docHeight  +  offset, w, h);     
120           if (offset  <=   0 )   
121          {   
122              window.clearInterval(timer);   
123               if (me.autoHideTimeOut > 0 ) 
124              { 
125                  window.setTimeout( function (){me.hide()},me.autoHideTimeOut); 
126              } 
127          }   
128          offset  =  offset  -  me.step;   
129     
130      }   
131   
132       if ( typeof ( this .speed) != " number " || this .speed <= 0 ) 
133      { 
134           this .speed  =   20 ; 
135      } 
136   
137      timer  =  window.setInterval(fun, this .speed)       
138     
139        
140     
141       var  btClose  =  oPopup.document.getElementById( " btSysClose " );   
142     
143      btClose.onclick  =   function ()   
144      {   
145          me.hide();   
146      }   
147     
148       var  btCommand  =  oPopup.document.getElementById( " btCommand " );   
149      btCommand.onclick  =   function ()   
150      {   
151          me.oncommand();   
152      }   
153     
154       this .timer  =  timer;   
155     
156  }   
157     
158  CLASS_MSN_MESSAGE.prototype.rect  =   function (left,right,top,bottom)  
159  {  
160       try   
161      {  
162           this .left    =  left     ? left    : 0 ;  
163           this .right   =  right     ? right    :screen.availWidth  - 1 ;  
164           this .top     =  top     ? top    : 0 ;  
165           this .bottom  =  bottom ? bottom    :screen.availHeight;  
166      }  
167       catch (e)  
168      {}  
169  }  
170    
171  var  msg1  =   new  CLASS_MSN_MESSAGE( " aa " , 200 , 120 , " 短消息提示： " , " 您有1封消息 " , " 今天请我吃饭哈 " );   
172      msg1.speed  =   20 ; 
173      msg1.autoHideTimeOut  =   2000 ; 
174      msg1.show();   
175    
176  // 同时两个有闪烁，只能用层代替了，不过层不跨框架  
177  // var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有2封消息","好的啊");   
178  //       MSG2.rect(0,null,0,screen.availHeight-120);  
179  //     MSG2.show();   
180    
181  // -->   
182  </ script >  

• 纯js编写
• 跨框架
• 无图片
• 支持调速度
• 任意位置弹出
• 需要ie5.5以上

 

  1  < HTML >< HEAD >  
  2  < SCRIPT language = JavaScript >   
  3  <!--   
  4    
  5  /**//*   
  6  **    ==================================================================================================  
  7  **    类名：CLASS_MSN_MESSAGE  
  8  **    功能：提供类似MSN消息框  
  9  **    示例：  
 10      ---------------------------------------------------------------------------------------------------  
 11    
 12              var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈");  
 13                  MSG.show();  
 14    
 15      ---------------------------------------------------------------------------------------------------  
 16  **    作者：ttyp  
 17  **    邮件：ttyp@21cn.com  
 18  **    日期：2005-3-18  
 19  **    ==================================================================================================  
 20  * */   
 21    
 22    
 23  /**//*   
 24   *    消息构造  
 25    */   
 26  function  CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action){  
 27       this .id      =  id;  
 28       this .title   =  title;  
 29       this .caption =  caption;  
 30       this .message =  message;  
 31       this .target  =  target;  
 32       this .action  =  action;  
 33       this .width     =  width ? width: 200 ;  
 34       this .height  =  height ? height: 120 ;  
 35       this .timeout =   150 ;  
 36       this .speed     =   20 ; 
 37       this .step     =   1 ; 
 38       this .right     =  screen.width  - 1 ;  
 39       this .bottom  =  screen.height; 
 40       this .left     =   this .right  -   this .width; 
 41       this .top     =   this .bottom  -   this .height; 
 42       this .timer     =   0 ; 
 43       this .pause     =   false ;
 44       this .close     =   false ;
 45       this .autoHide     =   true ;
 46  }  
 47    
 48  /**//*   
 49   *    隐藏消息方法  
 50    */   
 51  CLASS_MSN_MESSAGE.prototype.hide  =   function (){  
 52       if ( this .onunload()){  
 53 
 54           var  offset   =   this .height > this .bottom - this .top ? this .height: this .bottom - this .top; 
 55           var  me   =   this ;  
 56   
 57           if ( this .timer > 0 ){   
 58              window.clearInterval(me.timer);  
 59          }  
 60   
 61           var  fun  =   function (){  
 62               if (me.pause == false || me.close){
 63                   var  x   =  me.left; 
 64                   var  y   =   0 ; 
 65                   var  width  =  me.width; 
 66                   var  height  =   0 ; 
 67                   if (me.offset > 0 ){ 
 68                      height  =  me.offset; 
 69                  } 
 70       
 71                  y   =  me.bottom  -  height; 
 72       
 73                   if (y >= me.bottom){ 
 74                      window.clearInterval(me.timer);  
 75                      me.Pop.hide();  
 76                  }  else  { 
 77                      me.offset  =  me.offset  -  me.step;  
 78                  } 
 79                  me.Pop.show(x,y,width,height);    
 80              }             
 81          }  
 82   
 83           this .timer  =  window.setInterval(fun, this .speed)      
 84      }  
 85  }  
 86    
 87  /**//*   
 88   *    消息卸载事件，可以重写  
 89    */   
 90  CLASS_MSN_MESSAGE.prototype.onunload  =   function () {  
 91       return   true ;  
 92  }  
 93  /**//*   
 94   *    消息命令事件，要实现自己的连接，请重写它  
 95   *  
 96    */   
 97  CLASS_MSN_MESSAGE.prototype.oncommand  =   function (){  
 98       this .close  =   true ;
 99       this .hide();  
100  }  
101    
102  /**//*   
103   *    消息显示方法  
104    */   
105  CLASS_MSN_MESSAGE.prototype.show  =   function (){  
106 
107       var  oPopup  =  window.createPopup();  // IE5.5+  
108      
109       this .Pop  =  oPopup;  
110    
111       var  w  =   this .width;  
112       var  h  =   this .height;  
113    
114       var  str  =   " <DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH:  "   +  w  +   " px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT:  "   +  h  +   " px; BACKGROUND-COLOR: #c9d3f3'> "   
115          str  +=   " <TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0> "   
116          str  +=   " <TR> "   
117          str  +=   " <TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD> "   
118          str  +=   " <TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'> "   +   this .caption  +   " </TD> "   
119          str  +=   " <TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19> "   
120          str  +=   " <SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD> "   
121          str  +=   " </TR> "   
122          str  +=   " <TR> "   
123          str  +=   " <TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height= "   +  (h - 28 )  +   " > "   
124          str  +=   " <DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'> "   +   this .title  +   " <BR><BR> "   
125          str  +=   " <DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=true id='btCommand'><FONT color=#ff0000> "   +   this .message  +   " </FONT></A></DIV> "   
126          str  +=   " </DIV> "   
127          str  +=   " </TD> "   
128          str  +=   " </TR> "   
129          str  +=   " </TABLE> "   
130          str  +=   " </DIV> "   
131    
132      oPopup.document.body.innerHTML  =  str; 
133      
134    
135       this .offset   =   0 ; 
136       var  me   =   this ;  
137 
138      oPopup.document.body.onmouseover  =   function (){me.pause = true ;}
139      oPopup.document.body.onmouseout  =   function (){me.pause = false ;}
140 
141       var  fun  =   function (){  
142           var  x   =  me.left; 
143           var  y   =   0 ; 
144           var  width     =  me.width; 
145           var  height     =  me.height; 
146   
147               if (me.offset > me.height){ 
148                  height  =  me.height; 
149              }  else  { 
150                  height  =  me.offset; 
151              } 
152   
153          y   =  me.bottom  -  me.offset; 
154           if (y <= me.top){ 
155              me.timeout -- ; 
156               if (me.timeout == 0 ){ 
157                  window.clearInterval(me.timer);  
158                   if (me.autoHide){
159                      me.hide(); 
160                  }
161              } 
162          }  else  { 
163              me.offset  =  me.offset  +  me.step; 
164          } 
165          me.Pop.show(x,y,width,height);    
166   
167      }  
168    
169       this .timer  =  window.setInterval(fun, this .speed)      
170    
171       
172    
173       var  btClose  =  oPopup.document.getElementById( " btSysClose " );  
174    
175      btClose.onclick  =   function (){  
176          me.close  =   true ;
177          me.hide();  
178      }  
179    
180       var  btCommand  =  oPopup.document.getElementById( " btCommand " );  
181      btCommand.onclick  =   function (){  
182          me.oncommand();  
183      }    
184  }  
185  /**//*  
186  ** 设置速度方法 
187  * */  
188  CLASS_MSN_MESSAGE.prototype.speed  =   function (s){ 
189       var  t  =   20 ; 
190       try  { 
191          t  =  praseInt(s); 
192      }  catch (e){} 
193       this .speed  =  t; 
194  } 
195  /**//*  
196  ** 设置步长方法 
197  * */  
198  CLASS_MSN_MESSAGE.prototype.step  =   function (s){ 
199       var  t  =   1 ; 
200       try  { 
201          t  =  praseInt(s); 
202      }  catch (e){} 
203       this .step  =  t; 
204  } 
205    
206  CLASS_MSN_MESSAGE.prototype.rect  =   function (left,right,top,bottom){ 
207       try  { 
208           this .left         =  left     != null ? left: this .right - this .width; 
209           this .right         =  right     != null ? right: this .left  + this .width; 
210           this .bottom         =  bottom != null ? (bottom > screen.height ? screen.height:bottom):screen.height; 
211           this .top         =  top     != null ? top: this .bottom  -   this .height; 
212      }  catch (e){} 
213  } 
214  var  MSG1  =   new  CLASS_MSN_MESSAGE( " aa " , 200 , 120 , " 短消息提示： " , " 您有1封消息 " , " 今天请我吃饭哈 " );  
215      MSG1.rect( null , null , null ,screen.height - 50 ); 
216      MSG1.speed     =   10 ; 
217      MSG1.step     =   5 ; 
218       // alert(MSG1.top); 
219      MSG1.show();  
220   
221  // 同时两个有闪烁，只能用层代替了，不过层不跨框架 
222  // var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有2封消息","好的啊");  
223  //    MSG2.rect(100,null,null,screen.height); 
224  //     MSG2.show();  
225  // -->  
226  </ SCRIPT >  
227   
228  < META content = " MSHTML 6.00.2800.1106 "  name = GENERATOR ></ HEAD >  
229  < BODY ></ BODY ></ HTML >  

from:http://ttyp.cnblogs.com