Ajax controltoolkit Learning Log-alwaysvisiblecontrolextender (2)

I learned about the alwaysvisiblecontrolextender control this morning. In the afternoon, I will write something and summarize the usage methods.

Simple Example (display current time)
1) Create an ASP. Net Ajax-enabled web project under Vs and name it alwaysvisiblecontrolextender.


2) drag and drop an updatepanel control on the page, and drag and drop a panel and alwaysvisiblecontrolextender control in the updatepanel contenttemplate.

3) set targetcontrolid of alwaysvisiblecontrolextender to the Panel ID and add some attributes of alwaysvisiblecontrolextender.CodeAs follows:

1 <PC3: alwaysvisiblecontrolextender id = "bytes" horizontaloffset = "10" horizontalside = "right" verticaloffset = "10" verticalside = "TOP" targetcontrolid = "Panel1" leading = ". 1 "runat =" server ">
2 </PC3: alwaysvisiblecontrolextender>

Attribute description:
A. horizontaloffset: sets the offset of the target control in the horizontal direction, relative to the horizontal edge direction.
B. horizontalside: Set the reference direction of the horizontal edge of the target control.
C. vertialoffset: Set the offset of the target control in the vertical direction, relative to the vertical edge direction.
D. vertialside: Set the reference direction of the vertical edge of the target control.
E. targetcontrolid: ID of the target control.
F.Scrolleffectduration. Please advise.
3) Add a div label to the Panel to display the current time. The Code is as follows: <Div id = "currenttime" runat = "server" style = "font-size: XX-large; font-weight: bold; line-Height: 40px; "> </div>

4) Add a JavaScript function on the page to read the current time and display it in currenttime.

1 < Script Type = " Text/JavaScript " >
2 Function Updatetime ()
3 {
4 VaR Label = Document. getelementbyid ('currenttime ');
5 If (Label)
6 {
7 VaR Time = ( New Date (). localeformat ( " T " );
8 Label. innerhtml = Time;
9 }
10 }
11 Updatetime ();
12 Window. setinterval (updatetime, 1000 );
13 </ Script >

5) Right-click the page and choose View in the browser. Preview the effect.