jQuery Timer 实现的新邮件提醒

巨型光棍节这一天, 为了安慰大家寂寞的心灵, 所以今天又写了一个使用 , ,  控件实现的新邮件的提醒功能, 但这次是没有更新 的版本, 是不是很奇怪哪, :-)

本文将说明  控件的功能以及使用过程中的注意事项和技巧, 目录如下:

请确保已经在 Download 下载资源 中下载  最新的版本.

 的  属性表示在客户端运行的触发事件:

将  属性设置为如上形式的  函数, 即可在对应的  函数中编写触发时执行的代码. 其中, 参数 e 的 count 属性表示  开始计时后第几次触发事件.

代码中的  为处理服务器返回  的  函数, 这里采用的是  下的写法, 不同写法请参考 使用 ASP.NET 一般处理程序或 WebService 返回 JSON.

在  中, 调用  的  和  方法即可启动或者停止时钟, 语法为 :

<script type="text/javascript">    $( () {        checkTimer.__timer('start');    });</script>

这一节将说明新邮件提醒这个例子的大概设计思路, 在页面上使用了  控件来定时从  获取新邮件的有关信息:

方法  将返回 5 秒内的新邮件个数, 这个数将累计到  变量 newEMailCount 中, 如果 newEMailCount 不为 0, 则显示对话框将显示新邮件的个数, 一旦对话框关闭, newEMailCount 将被设置为 0:

 封新邮件'    Buttons="{'刷新': function(){ emailRepeater.__repeater('filter'); newDialog.dialog('close'); }}"    Close="function(){ newEMailCount = 0; }">

新邮件个数显示在标签 newcount 中, 而在  的  属性中, 编写了一个  函数来设置 newEMailCount 为 0.  的  属性定义了一个刷新按钮, 在按钮的点击事件中调用了  的  方法, 这样可以使邮件列表刷新, 更多  的信息可以参考 30 分钟掌握无刷新 Repeater, 这里就不再解释了,邮件的列表代码如下:

                                                                                    发信人                                                                标题                                                                时间                                                                                                            #{sender}                                                #{title}                                                #{time,jQuery.panzer.formatDate(#,'yyyy-M-d')}                                                                                                    上一页        下一页,        第 @{pageindex}/@{pagecount} 页, 共 @{itemcount} 条,                跳转                到第                页.                                                            

在页面中, 还添加了发送新邮件的文本框和按钮, 发送按钮将调用服务器端的  方法, 此方法将新邮件保存在  中, 并使新邮件的个数加 1, 这样 才能返回新的邮件个数:

发信人:请填写发信人'    Reg="$.panzer.reg.email"    RegTip='请填写一个正确的邮箱地址'    Checked="refreshSendButton">标题:请填写标题'    Checked="refreshSendButton">                                                

代码中, 使用了  来验证了用户输入的发信人和标题, 这里也不解释了, 可以参考 功能完善的 jquery validator 完成用户注册的验证.

 修改关于引用  的介绍.