ComponentOne MultiPage for ASP.NET AJAX: MultiPage for ASP.NET AJAX Task-Based Help > Client-Side Tasks for C1MultiPage > Creating Play and Stop Buttons

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. 


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.