Traduction

Cet article est la traduction la plus fidèle possible de l'article original de Christian Wenz: Manipulating DropShadow Properties from Client Code

Présentation

Le contrôle DropShadow de l'AJAX Control Toolkit étend un panel avec une ombre portée. Les propriétés de cette extension peuvent être changée depuis le code JavaScript du client.

Étapes

Le code commence avec un Panel qui contient quelques lignes de texte:

 
Sélectionnez

<asp:Panel ID="panelShadow" runat="server" CssClass="panel" Width="300px">
	ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, 
	more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br />
	ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, 
	more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br />
	ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, 
	more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br />
</asp:Panel>

Le classe CSS associée donne au Panel une jolie couleur de fond:

 
Sélectionnez

<style type="text/css">
	.panel {background-color: navy;}
</style>

Le DropShadowExtender est ajouté pour étendre le Panel avec un effet d'ombre, l'opacité est de 50%:

 
Sélectionnez

<ajaxToolkit:DropShadowExtender ID="dse1" runat="server" 
	TargetControlID="panelShadow" Opacity="0.5" Rounded="true" />

Ensuite, le contrôle ScriptManager de l'ASP.NET AJAX permet au Control Toolkit de fonctionner:

 
Sélectionnez

<asp:ScriptManager ID="asm" runat="server" />

Un autre Panel contient deux liens JavaScript pour modifier l'opacité de notre ombre portée: Le lien “moins” diminue l'opacité de l'ombre,le lien “plus” l'augmente.

 
Sélectionnez

<asp:Panel ID="panelControl" runat="server">
	<br />
	<label id="txtOpacity" runat="server">0.5</label>
	<a href="#" onclick="changeOpacity(-0.1); return false;">-</a>
	<a href="#" onclick="changeOpacity(+0.1); return false;">+</a>
</asp:Panel>

La fonction JavaScript changeOpacity() doit tout d'abord trouver le contrôle DropShadowExtender dans la page. L'ASP.NET AJAX définit la méthode $find() pour cette tâche. Ensuite, la méthode get_Opacity() récupére l'opacité courante, et la méthide set_Opacity() la définie. Le code JavaScript suivant applique la valeur acutelle de l'opacité à l'élément <label>:

 
Sélectionnez

<script type="text/javascript">
function changeOpacity(delta)
{
	var dse = $find("dse1");
	var o = dse.get_Opacity();
	o += delta;
	o = Math.round(10 * o) / 10;
	if (o <= 1.0 && o >= 0.0)
	{
		dse.set_Opacity(o);
		$get("txtOpacity").firstChild.nodeValue = o;
	}
}
</script>
Image non disponible
Ombre portée sur un Panel