jQuery Timer 实现的新邮件提醒
在巨型光棍节这一天, 为了安慰大家寂寞的心灵, 所以今天又写了一个使用 Timer, Repeater, Validator 控件实现的新邮件的提醒功能, 但这次是没有更新JQueryElement 的版本, 是不是很奇怪哪, :-)
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
本文将说明 Timer 控件的功能以及使用过程中的注意事项和技巧, 目录如下:
* 准备
* 触发间隔
* 客户端触发事件
* 服务器端触发事件
* 启动和停止时钟
* 附录: 新邮件提醒示例分析
准备
请确保已经在 Download 下载资源 中下载 JQueryElement 最新的版本.
请使用指令引用如下的命名空间:
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin"
TagPrefix="je"%>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
Namespace="zoyobar.shared.panzer.web.jqueryui"
TagPrefix="je"%>
除了命名空间, 还需要引用 jQueryUI 的脚本和样式, 在 Download 下载资源 下载的压缩包中包含了一个自定义样式的 jQueryUI, 如果需要更多样式, 可以在http://jqueryui.com/download 下载:
<link type="text/css" rel="stylesheet" href="[样式路径]/jquery-ui-1.8.15.custom.css"/>
<script type="text/javascript" src="[脚本路径]/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="[脚本路径]/jquery-ui-1.8.15.custom.min.js"></script>
触发间隔
可以通过 Interval 属性来设置时钟的触发时间间隔, 以毫秒为单位, 默认为 1000 毫秒.
客户端触发事件
Timer 的 Tick 属性表示在客户端运行的触发事件:
<je:Timer ID="checkTimer" runat="server" Tick="
function(pe, e){
alert('触发次数 ' + e.count.toString());
}
">
</je:Timer>
将 Tick 属性设置为如上形式的 javascript 函数, 即可在对应的 javascript 函数中编写触发时执行的代码. 其中, 参数 e 的 count 属性表示 timer 开始计时后第几次触发事件.
服务器端触发事件
设置 TickAsync 属性, 可以调用服务器端的方法, 形式如下:
<je:Timer ID="checkTimer" runat="server">
<TickAsync Url="<触发事件地址>" MethodName="<触发事件名称>" Success="<处理结果的 javascript 函数>">
<ParameterList>
<je:Parameter Name="<参数名1>"
Type="Expression"
Value="<值1>"
Default="<默认值1>"/>
<je:Parameter Name="<参数名2>"
Type="Selector"
Value="<选择器2>"
Default="<默认值2>"/>
</ParameterList>
</TickAsync>
</je:Timer>
<je:Timer ID="checkTimer" runat="server">
<TickAsync Url="webservice.asmx" MethodName="NewEMailCount" Success="
function(data){
}
">
</TickAsync>
</je:Timer>
其中, 通过 Parameter 可以为 Ajax 调用添加参数, 更多 Parameter 的信息, 请参考 通过 Parameter 对象添加 Ajax 请求时的参数.
代码中的 Success 为处理服务器返回 JSON 的 javascript 函数, 这里采用的是 .NET 2.0 下的写法, 不同写法请参考 使用 ASP.NET 一般处理程序或 WebService 返回 JSON.
启动和停止时钟
在 javascript 中, 调用 timer 的 start 和 stop 方法即可启动或者停止时钟, 语法为 <timer 变量>.__timer('start'); <timer 变量>.__timer('stop');:
<script type="text/javascript">
$(function () {
checkTimer.__timer('start');
});
</script>
附录: 新邮件提醒示例分析
这一节将说明新邮件提醒这个例子的大概设计思路, 在页面上使用了 Timer 控件来定时从 WebService 获取新邮件的有关信息:
<je:Timer ID="checkTimer" runat="server" IsVariable="true" Interval="5000">
<TickAsync Url="webservice.asmx" MethodName="NewEMailCount" Success="
function(data){
// 如果是 .NET 3.5, 4.0 需要换成 data.d
newEMailCount += data;
if(newEMailCount != 0){
$('#newcount').text(newEMailCount.toString());
newDialog.dialog('open');
}
}
">
</TickAsync>
</je:Timer>
方法 NewEMailCount 将返回 5 秒内的新邮件个数, 这个数将累计到 javascript 变量 newEMailCount 中, 如果 newEMailCount 不为 0, 则显示对话框将显示新邮件的个数, 一旦对话框关闭, newEMailCount 将被设置为 0:
<je:Dialog ID="newDialog" runat="server" IsVariable="true"
AutoOpen="false" Position="['right', 'bottom']"
Html='您有 <strong id="newcount"></strong> 封新邮件'
Buttons="{'刷新': function(){ emailRepeater.__repeater('filter'); newDialog.dialog('close'); }}"
Close="function(){ newEMailCount = 0; }">
</je:Dialog>
新邮件个数显示在标签 newcount 中, 而在 Dialog 的 Close 属性中, 编写了一个 javascript 函数来设置 newEMailCount 为 0. Dialog 的 Buttons 属性定义了一个刷新按钮, 在按钮的点击事件中调用了 repeater 的 filter 方法, 这样可以使邮件列表刷新, 更多 Repeater 的信息可以参考 30 分钟掌握无刷新 Repeater, 这里就不再解释了, 邮件的列表代码如下:
<table id="list">
<je:Repeater ID="emailRepeater" runat="server" IsVariable="true" Selector="'#list'"
PageSize="4" FillAsync-Url="webservice.asmx" FillAsync-MethodName="GetEMailList">
<HeaderTemplate>
<thead>
<tr>
<td>
发信人
</td>
<td>
标题
</td>
<td>
时间
</td>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="sender">
#{sender}
</td>
<td class="#{isnew,# ? 'new-mail' : ''}">
#{title}
</td>
<td class="timer">
#{time,jQuery.panzer.formatDate(#,'yyyy-M-d')}
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tfoot>
<tr>
<td colspan="2">
<a href="#" je-onclick="prev">上一页</a>
<a href="#" je-onclick="next">下一页</a>,
第 @{pageindex}/@{pagecount} 页, 共 @{itemcount} 条,
<a href="#" je-onclick="goto,new Number(jQuery('#pageindex').val())">
跳转
</a>
到第
<input type="text" id="pageindex" value="@{pageindex}"/>
页.
</td>
</tr>
</tfoot>
</FooterTemplate>
</je:Repeater>
</table>
在页面中, 还添加了发送新邮件的文本框和按钮, 发送按钮将调用服务器端的 SendEMail 方法, 此方法将新邮件保存在 DataTable 中, 并使新邮件的个数加 1, 这样NewEMailCount 才能返回新的邮件个数:
<strong>发信人:</strong>
<input type="text" id="eSender"/>
<je:Validator ID="vSender" runat="server" IsVariable="true" Target="#eSender"
Need="true" NeedTip='<font color="red">请填写发信人</font>'
Reg="$.panzer.reg.email"
RegTip='<font color="red">请填写一个正确的邮箱地址</font>'
Checked="refreshSendButton">
</je:Validator>
<br />
<br />
<strong>标题: </strong>
<input type="text" id="eTitle"/>
<je:Validator ID="vTitle" runat="server" IsVariable="true" Target="#eTitle"
Need="true" NeedTip='<font color="red">请填写标题</font>'
Checked="refreshSendButton">
</je:Validator>
<br />
<br />
<je:Button ID="cmdSend" runat="server" IsVariable="true" Label="发送" Disabled="true">
<ClickAsync Url="webservice.asmx" MethodName="SendEMail" Success="
function(data){
alert(data);
}
">
<ParameterList>
<je:Parameter Name="sender" Type="Expression"
Value="vSender.__validator('option','value')"/>
<je:Parameter Name="title" Type="Selector"
Value="'#eTitle'"/>
</ParameterList>
</ClickAsync>
</je:Button>
代码中, 使用了 Validator 来验证了用户输入的发信人和标题, 这里也不解释了, 可以参考 功能完善的 jquery validator 完成用户注册的验证.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/bGiJ5XUyfVI/, 建议全屏观看.
修订历史
2011-11-26: 修改关于引用 jQueryUI 的介绍.