You can download source code for control only, sample with control, and see the sample online.
We can use server side timer control that is available in AJAX library. But often we need timer that works on client only. Server Timer control posts back every time when tick event is raised. I need the similar control, that raises this event on client.
I found one very good sample, and to not waste time and reinvent already existing, I used this sample to create reusable Timer control.
The sample is from online AJAX docs website, Custom Demo.Timer Component
Here is a code of sample page demonstrating how to use the control:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="Devarchive.Net" Namespace="Devarchive.Net" TagPrefix="dn" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> #divOutput { border: dashed 1px black; } .highlight { background-color : Silver; } </style> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <dn:Timer runat="server" ID="Timer1" Interval="1000" ComponentID="t1" OnTick="onTick" /> <script type="text/javascript"> var i = 0; var b = false; function onTick() { $get("divOutput").innerHTML = new Date().format("HH:mm:ss tt"); $get("divOutput").className = b ? "highlight" : ""; b = !b; } function enableTimer() { $find("t1").set_enabled(true); updateStatus(); } function disableTimer() { $find("t1").set_enabled(false); updateStatus(); } function pageLoad(sender, args) { $find("slider").add_valueChanged(sliderChanged); updateStatus(); } function sliderChanged(sender, args) { var interval = parseInt($find("slider").get_Value()); $find("t1").set_interval(interval); updateStatus(); } function updateStatus() { var interval = $find("t1").get_interval(); var enabled = $find("t1").get_enabled(); $get("divDetails").innerHTML = String.format( "Interval: {0} ms<br />Enabled: {1}", interval, enabled ); $get("btnDisabled").disabled = !enabled; $get("btnEnabled").disabled = enabled; } </script> <div id="divOutput"> </div> <div id="divDetails"> </div> <asp:TextBox runat="server" ID="tbInterval" Text="1000" /> <cc1:SliderExtender BehaviorID="slider" ID="slider" Minimum="10" Maximum="10000" TargetControlID="tbInterval" runat="server"> </cc1:SliderExtender> <br /> <input type="button" id="btnEnabled" value="Enable Timer" onclick="enableTimer();" /> <input type="button" id="btnDisabled" value="Disable Timer" onclick="disableTimer();" /> </form> </body> </html>
As you see, markup for the control on the page is:
<dn:Timer runat="server" ID="Timer1" Interval="1000" ComponentID="t1" OnTick="onTick" />
Interval - interval in milliseconds,
Enabled - set true to activate timer, or false to deactivate it,
ComponentID - assign some id to the control, using this id the component can be referenced from the script using syntax: $find("<ComponentID>), if not specified, ClientID is used
OnTick - specify client side function which will be called on every tick event. Alternatively you can attach event handlers from javascript using syntax:
$find(<ComponentID>).add_tick(myHandler), and detach them using syntax: $find(<ComponentID>).remove_tick(myHandler).
The running sample page looks like this:
Hope this helps.
3 comments:
nice one! EXACTLY what i was looking for!
--nick
I have searched the net for exactly this solution. Thanks.
Hello.
more links for that topic?
And Bye.
Post a Comment