In this topic, you will write a client-side script that allows users to set the duration of a C1MultiPage control's animation effect at run-time.
To set the duration of an animation at run-time, complete the following steps:
1. Add a new C1MultiPage control to your project.
2. Click
C1MultiPage's smart tag (
) to open the C1MultiPage Tasks menu and select
MultiPage Designer.
The C1MultiPage Designer Form opens.
3. Use the Add Child
Item button 
to add three pages to the C1MultiPage.
4. In treeview, select C1MultiPage1 and set its Animation property to SlideRight.
5. Click OK to close the C1MultiPage Designer Form.
6. Place your cursor in the C1MultiPage and then add text or an arbitrary control to the first page of the control (see Adding and Manipulating Page Content for more information).
7. Click
C1MultiPage's smart tag () and select Move to next page from the menu. Once the
second page is in focus, add text or an arbitrary control to the page. Repeat
this step to add content to the third page.
8. Click OK to close the C1MultiPage Designer Form.
9. Click the Source tab to enter Source view and place the following JavaScript beneath the <HTML> tag:
<script language="javascript" type="text/javascript">
function SetDuration()
{
var oPage = Sys.Application.findComponent("<%=C1MultiPage1.ClientID%>");
oPage.set_duration(document.getElementById('TxtDuration').value);
}
</script>
10. Add the following markup beneath the </cc1:C1MultiPage> tag to add a text box and button to the project.
<input id="TxtDuration" type="text" size="3" value=""/><input id="SetEnabled" type="button" value="Set Duration" onclick="SetDuration()" />
11. Run the program, enter a low number (such as 5) into the text box and press the Set Duration button. Use the navigation buttons to switch page views and observe that the animation barely registers. Now type "3500" into the text box, press the Set Duration button, and use the navigation buttons to switch page views. This time, the new page will slide in slowly from the left side of the control.
|
