最近在公司做了一个在线提醒功能，代码是我从网上找的，写得不错，结合了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了，之前排版没弄好，实在不好意思，很多朋友看不懂，现在好了，如果还有问题，可以给我留言！希望多多指教！
