Examples - Image Toggle
Example 1: Basic Image Toggle
This example shows the basic use of the image toggle with 3 traffic light images. The value of the selected image has been linked to the textbox "txtValue". Changing the value in the textbox to the id of one of the other images will result in the image displayed changing to the image with the matching id. If the id specified does not exist in the list of images, no image will be displayed.
Code:
<div ext="imagetoggle" id="imgToggle" linkto="txtValue" style="display:none;float:left;">
<img src="dot_red.png" selected id="dotRed"/>
<img src="dot_amber.png" id="dotAmber"/>
<img src="dot_green.png" id="dotGreen"/>
</div>
<input type="text" id="txtValue" style="float: left;"/>
<img src="dot_red.png" selected id="dotRed"/>
<img src="dot_amber.png" id="dotAmber"/>
<img src="dot_green.png" id="dotGreen"/>
</div>
<input type="text" id="txtValue" style="float: left;"/>
Result:
Example 2: Basic Image Toggle - Attribute Value Change
This example follows Example 1, with the exception that the images are using the custom attribute value to uniquely identify them. The Image Toggle has the attribute van defined to tell the control to use the attribute value defined in the image tag to identify each image.
Code:
<div ext="imagetoggle" id="imgToggle" linkto="txtValue2" style="display:none;float:left;" van="value">
<img src="dot_red.png" selected id="dotRed2" value="red"/>
<img src="dot_amber.png" id="dotAmber2" value="amber"/>
<img src="dot_green.png" id="dotGreen2" value="green"/>
</div>
<input type="text" id="txtValue2" style="float: left;"/>
<img src="dot_red.png" selected id="dotRed2" value="red"/>
<img src="dot_amber.png" id="dotAmber2" value="amber"/>
<img src="dot_green.png" id="dotGreen2" value="green"/>
</div>
<input type="text" id="txtValue2" style="float: left;"/>