Creating Play and Stop Buttons
In this topic, you will create two buttons that will allow users to govern the AutoPlay feature of the C1MultiPage control. One of these buttons will begin the AutoPlay operation, whereas the other will stop it.
Complete the following steps:
1. Click C1MultiPage's smart tag () to open the C1MultiPage Tasks menu and select MultiPage Designer.
The C1MultiPage Designer Form opens.
2. Use the Add Child Item button to add three pages to the C1MultiPage.
3. Set the ContentUrl property of each page to the following:
• C1PageView1 – "http://www.google.com"
• C1PageView2 – "http://www.msn.com"
• C1PageView3 – "http://www.componentone.com"
4. Click OK to close the C1MultiPage Designer Form.
5. Navigate to the Toolbox and add two standard Button controls your project. Set the Text property of each button as follows:
• Button1 – "Play"
• Button2 – "Stop"
6. Set the UseSubmitBehavior property of both buttons to False. This will prevent the buttons from posting back to the server when clicked.
7. Click the Source tab to enter Source view and place the following JavaScript beneath the <HTML> tag:
<script type="text/javascript">
function Play()
{
$find('<%= C1MultiPage1.ClientID %>').play();
}
function Stop()
{
$find('<%= C1MultiPage1.ClientID %>').stop();
}
</script>
8. Set the OnClientClick property in each of the <asp:Button> tags so that they call the JavaScript functions you created in the last step. Your markup should resemble the following:
<asp:Button ID="Button1" runat="server" Text="Play" OnClientClick="Play();return;" UseSubmitBehavior="False" BackColor="Lime" />
<asp:Button ID="Button2" runat="server" Text="Stop" OnClientClick="Play();return;" UseSubmitBehavior="False" BackColor="Red" /></div>
9. Run the project and press the Play button to start AutoPlay mode. Now press Stop and observe that it halts the automatic playback.
|