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 的介绍.

欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement, 微博: http://t.qq.com/zoyobar
转载：http://www.cnblogs.com/zoyobar/archive/2011/11/11/JE_20.html