In this topic, we will create a client-side script that will allow users to set the Animation, Easing, and Duration properties at run time.
Complete the following steps:
1. Click
C1TabControl's smart tag (
) to open the C1TabControl Tasks menu and then select
TabControl Designer.
The C1TabControl Designer Form appears.
2. Use the Add Child
Item button 
to add two tabs to the C1TabControl control.
3. Click OK to close the C1TabControlDesigner Form.
4. Click the Source tab to switch Source view and add the following JavaScript beneath the <html> tag:
<script language="javascript" type="text/javascript">
function applyControlSettings() {
try {
var TabControl = Sys.Application.findComponent("<%=C1TabControl1.ClientID%>" + "_Pages");
var animation = document.getElementById("Select_Animation").value*1;
var duration = document.getElementById("TextField_Duration").value*1;
var easing = document.getElementById("Select_Easing").value*1;
TabControl.set_animation(animation);
TabControl.set_duration(duration);
TabControl.set_easing(easing);
} catch (ex) {
alert("Wrong settings:" + ex.message);
}
}
</script>
5. Now we're going to create two drop-down lists: one for Animation settings, and the other for Easing settings. Place the following XHTML markup below the </cc1: C1TabControl> tag to create both drop-down lists:
<p class="ControlOptions-Option-Header">Select Animation</p>
<div style="clear:none;float:left;width:150px;">
Animation
</div>
<div style="clear:none;float:left;width:150px;">
<select id="Select_Animation" style="width:150px;">
<option selected="selected" value="0">None</option>
<option value="1">Auto</option>
<option value="2">Fade</option>
<option value="3">SlideLeft</option>
<option value="4">SlideRight</option>
<option value="5">SlideTop</option>
<option value="6">SlideBottom</option>
<option value="7">SlideLeftRight</option>
<option value="8">SlideRightLeft</option>
<option value="9">SlideTopBottom</option>
<option value="10">SlideBottomTop</option>
</select>
</div>
<div style="clear:both;overflow:hidden;height:3px;width:100%;"> </div>
<div style="clear:none;float:left;width:150px;">
Easing
</div>
<div style="clear:none;float:left;width:150px;">
<select id="Select_Easing" style="width:150px;">
<option value="1">EaseOutElastic</option>
<option value="2">EaseInElastic</option>
<option value="3">EaseInOutElastic</option>
<option value="4">EaseOutBounce</option>
<option value="5">EaseInBounce</option>
<option value="6">EaseInOutBounce</option>
<option value="7">EaseOutExpo</option>
<option value="8">EaseInExpo</option>
<option value="9">EaseInOutExpo</option>
<option value="10">EaseOutQuad</option>
<option value="11">EaseInQuad</option>
<option value="12">EaseInOutQuad</option>
<option value="13">EaseOutSine</option>
<option value="14">EaseInSine</option>
<option value="15">EaseInOutSine</option>
<option value="16">EaseOutCirc</option>
<option value="17">EaseInCirc</option>
<option value="18">EaseInOutCirc</option>
<option value="19">EaseOutCubic</option>
<option value="20">EaseInCubic</option>
<option value="21">EaseInOutCubic</option>
<option value="22">EaseOutQuint</option>
<option value="23">EaseInQuint</option>
<option value="24">EaseInOutQuint</option>
<option value="25">EaseOutBack</option>
<option value="26">EaseInBack</option>
<option value="27">EaseInOutBack</option>
<option value="28">EaseOutQuart</option>
<option value="29">EaseInQuart</option>
<option value="30">EaseInOutQuart</option>
<option selected="selected" value="31">EaseLinear</option>
</select>
</div>
6. Next we're going to create an input text box so that our users can specify the Duration of the animation. To create this text box, place the following markup beneath the last </div> tag:
<div style="clear:none;float:left;width:150px;">
Duration (ms)
</div>
<div style="clear:none;float:left;width:150px;">
<input type="text" style="width:125px;" value="500" id="TextField_Duration" />
</div>
7. Add a submit button to the project by placing the following markup beneath the </div> tag for the text box we just created:
<br />
<input id="Button1" type="button" value="Submit Settings" onclick="applyControlSettings()"/>
8. Run the project and observe that you can set the Animation, Easing, and Duration properties of the control without posting back to the server.
|
