最近在公司做了一个在线提醒功能，代码是我从网上找的，写得不错，结合了ajax，使用户体验非常好，在此与大家一起分享，如果不懂ajax的朋友可以看一下我先前发表的关于ajax的文章，懂的话就可以直接用以下的代码做提醒功能了。
运行效果如下:
右下角显示一个层，层里面显示要显示的内容，内容可以自在后台页面(json页面)进行处理
具体js代码如下：
虚线以内的部分也属于js文件的一部分，虚线以外的代码大家可以不必该，虚线以内的方法为调用后台显示数据的ajax方法
C#代码(JsonGetDataList类，这个类的aspx文件中的内容都要删除掉什么都不要，就是最上面那一句也不要)：
代码
1 using System;
2 using System.Text;
3 using System.IO;
4 using Newtonsoft.Json;
5 using System.Data.OleDb;
6 using System.Data;
7
8 namespace WebApplication1
9 {
10 public partial class JsonGetDataList : System.Web.UI.Page
11 {
12 private string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings[ " myConn " ].ToString(); // 数据库连接字符串
13 protected void Page_Load( object sender, EventArgs e)
14 {
15 ShowData();
16 }
17 private void ShowData()
18 {
19 // 去掉页面缓存
20 Page.Response.Buffer = true ;
21 Page.Response.ExpiresAbsolute = DateTime.Now.AddDays( - 1 );
22 Page.Response.AddHeader( " pragma " , " no-cache " );
23 Page.Response.AddHeader( " cache-control " , "" );
24 Page.Response.CacheControl = " no-cache " ;
25 Response.ContentType = " text/plain " ;
26 int pageindex = string .IsNullOrEmpty(Request.QueryString[ " pageindex " ]) ? 1 :Convert.ToInt32(Request.QueryString[ " pageindex " ]);
27 DataSet ds = GetList(pageindex);
28 string jsonData = DataTableToJSON(ds.Tables[ 0 ], " ShowData " );
29 // 输入json格式数据
30 Response.Write(jsonData);
31 }
32 /// <summary>
33 /// 分页获取数据列表
34 /// </summary>
35 private DataSet GetList( int pageindex)
36 {
37 // 创建数据库连接池
38 OleDbConnection co = new OleDbConnection(constr);
39 // 打开连接池
40 co.Open();
41 OleDbCommand commands;
42 commands = new OleDbCommand( " select * from pcpconfig " , co);
43 // 数据总记录数
44 int totalcounts = Convert.ToInt32(commands.ExecuteScalar());
45 // 自定义每页大小为5条数据
46 int pagesize = 5 ;
47 // 总记录数
48 int totalpages;
49 if (totalcounts % pagesize > 0 )
50 totalpages = totalcounts / pagesize + 1 ;
51 else
52 totalpages = totalcounts / pagesize;
53 if (pageindex > totalpages)
54 pageindex = totalpages;
55 DataSet ds = new DataSet();
56 commands = new OleDbCommand( " select top 5 * from pcpconfig where configid not in (select top (5*( " + pageindex + " -1)) configid from pcpconfig) " , co);
57 OleDbDataAdapter adapter = new OleDbDataAdapter(commands);
58 adapter.Fill(ds, " ds " );
59 co.Close();
60 co.Dispose();
61 return ds;
62 }
63 /// <summary>
64 /// 数据表转换成JSON字符
65 /// </summary>
66 /// <param name="dt"> 数据表对象 </param>
67 /// <param name="dtName"> 数据表名称 </param>
68 public static string DataTableToJSON(DataTable dt, string dtName)
69 {
70 StringBuilder sb = new StringBuilder();
71 StringWriter sw = new StringWriter(sb);
72
73 using (JsonWriter jw = new JsonTextWriter(sw))
74 {
75 JsonSerializer ser = new JsonSerializer();
76 jw.WriteStartObject();
77 jw.WritePropertyName(dtName);
78 jw.WriteStartArray();
79
80 if (dt != null )
81 {
82 foreach (DataRow dr in dt.Rows)
83 {
84 jw.WriteStartObject();
85
86 foreach (DataColumn dc in dt.Columns)
87 {
88 jw.WritePropertyName(dc.ColumnName);
89 ser.Serialize(jw, dr[dc].ToString());
90 }
91
92 jw.WriteEndObject();
93 }
94 }
95
96 jw.WriteEndArray();
97 jw.WriteEndObject();
98
99 sw.Close();
100 jw.Close();
101
102 }
103
104 return sb.ToString();
105 }
106 }
107 }
108
JS代码(也就是messagebox.js)：
代码
1 ( function (){ var ua = navigator.userAgent.toLowerCase(); var is = (ua.match( / \b(chrome|opera|safari|msie|firefox)\b / ) || [ '' , ' mozilla ' ])[ 1 ]; var r = ' (?: ' + is + ' |version)[\\/: ]([\\d.]+) ' ; var v = (ua.match( new RegExp(r)) || [])[ 1 ];jQuery.browser.is = is;jQuery.browser.ver = v;jQuery.browser[is] = true })();( function (jQuery){ this .version = ' @1.5 ' ; this .layer = { ' width ' : 200 , ' height ' : 100 }; this .title = ' 信息提示 ' ; this .time = 180000 ; this .anims = { ' type ' : ' slide ' , ' speed ' : 600 }; this .timer1 = null ; this .inits = function (title,text){ if ($( " #message " ).is( " div " )){ return }
2 $(document.body).prepend( ' <div id="message" style="border:#b9c9ef 1px solid;z-index:100;width: '
3 + this .layer.width
4 + ' px;height: '
5 + this .layer.height
6 + ' px;position:absolute; display:none;background:#cfdef4; bottom:0; right:0; overflow:hidden;"><div style="border:1px solid #fff;border-bottom:none;width:100%;height:25px;font-size:12px;overflow:hidden;color:#1f336b;"><span id="message_close" style="float:right;padding:5px 0 5px 0;width:16px;line-height:auto;color:red;font-size:12px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;">×</span><div style="padding:5px 0 5px 5px;width:100px;line-height:18px;text-align:left;overflow:hidden;"> '
7 + title
8 + ' </div><div style="clear:both;"></div></div> <div style="padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;"><div id="message_content" style="margin:0 5px 0 5px;border:#b9c9ef 1px solid;padding:10px 0 10px 5px;font-size:12px;width: '
9 + ( this .layer.width - 17 )
10 + ' px;height: '
11 + ( this .layer.height - 50 )
12 + ' px;color:#1f336b;text-align:left;overflow:hidden;line-height:150%"> '
13 + text + ' </div></div></div> ' );$( " #message_close " ).click( function (){setTimeout( ' this.close() ' , 1 )});$( " #message " ).hover( function (){clearTimeout(timer1);timer1 = null }, function (){ if (time > 0 )
14 timer1 = setTimeout( ' this.close() ' ,time)});$(window).scroll( function (){ var bottomHeight = " - " + document.documentElement.scrollTop;$( " #message " ).css( " bottom " ,bottomHeight + " px " )})}; this .show = function (title,text,time){ if ($( " #message " ).is( " div " )){ return }
15 if (title == 0 ||! title)
16 title = this .title; this .inits(title,text); if (time >= 0 )
17 this .time = time; switch ( this .anims.type){ case ' slide ' :$( " #message " ).slideDown( this .anims.speed); break ; case ' fade ' :$( " #message " ).fadeIn( this .anims.speed); break ; case ' show ' :$( " #message " ).show( this .anims.speed); break ; default :$( " #message " ).slideDown( this .anims.speed); break }
18 var bottomHeight = " - " + document.documentElement.scrollTop;$( " #message " ).css( " bottom " ,bottomHeight + " px " ); if ($.browser.is == ' chrome ' ){setTimeout( function (){$( " #message " ).remove(); this .inits(title,text);$( " #message " ).css( " display " , " block " )}, this .anims.speed - ( this .anims.speed / 5))}
19 this .rmmessage( this .time)}; this .lays = function (width,height){ if ($( " #message " ).is( " div " )){ return }
20 if (width != 0 && width)
21 this .layer.width = width; if (height != 0 && height)
22 this .layer.height = height}
23 this .anim = function (type,speed){ if ($( " #message " ).is( " div " )){ return }
24 if (type != 0 && type)
25 this .anims.type = type; if (speed != 0 && speed){ switch (speed){ case ' slow ' :; break ; case ' fast ' : this .anims.speed = 200 ; break ; case ' normal ' : this .anims.speed = 400 ; break ; default : this .anims.speed = speed}}}
26 this .rmmessage = function (time){ if (time > 0 ){timer1 = setTimeout( ' this.close() ' ,time)}}; this .close = function (){ switch ( this .anims.type){ case ' slide ' :$( " #message " ).slideUp( this .anims.speed); break ; case ' fade ' :$( " #message " ).fadeOut( this .anims.speed); break ; case ' show ' :$( " #message " ).hide( this .anims.speed); break ; default :$( " #message " ).slideUp( this .anims.speed); break };setTimeout( ' $("#message").remove(); ' , this .anims.speed); this .original()}
27 this .original = function (){ this .layer = { ' width ' : 200 , ' height ' : 100 }; this .title = ' 信息提示 ' ; this .time = 180000 ; this .anims = { ' type ' : ' slide ' , ' speed ' : 600 }};jQuery.messager = this ; return jQuery})(jQuery);
28
29 var url = "" ; var userInfo = "" ; var msgContent = "" ;
30
31 $().ready( function (){ return ShowBox()});
32 function ShowBox(){
33 if (GetMsgContent()){
34 $.messager.lays( 300 , 200 );
35 $.messager.show( 0 , userInfo + " <br /> " + msgContent);
36 }
37 url = "" ;userInfo = "" ;msgContent = "" ; delete url; delete userInfo; delete msgContent; return true
38 }
39 function GetMsgContent()
40 {
41 var isShow = false ;
42 $.ajax({
43 type: " GET " ,
44 dataType: " json " ,
45 url: " JsonGetDataList.aspx " ,
46 async: false ,
47 success: function (json){
48 isShow = true ;
49 var result = json.ShowData;
50 userInfo = " 乐乐，你有新的消息，请查看： "
51 $.each(result, function (i,n){
52 msgContent += " <li>.... " + n.LessonName + " ..... " + n.CreateTime + " ............</li> " ;
53 });
54 }
55 })
56 return isShow;
57 }
OK了，之前排版没弄好，实在不好意思，很多朋友看不懂，现在好了，如果还有问题，可以给我留言！希望多多指教！