Manipular propiedades DropShadow desde el código de cliente (C#)

por Christian Wenz

Descargar PDF

El control DropShadow del Kit de herramientas de control de AJAX amplía un panel con una sombra paralela. Las propiedades de este control extensor también se pueden cambiar mediante código JavaScript de cliente.

Información general

El control DropShadow del Kit de herramientas de control de AJAX amplía un panel con una sombra paralela. Las propiedades de este control extensor también se pueden cambiar mediante código JavaScript de cliente.

Pasos

El código comienza con un panel que contiene algunas líneas de texto:

<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>

La clase CSS asociada proporciona al panel un bonito color de fondo:

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

El control DropShadowExtender se agrega para extender el panel con un efecto de sombra paralela, con la opacidad establecida en 50 %:

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

A continuación, el control ScriptManager de ASP.NET AJAX permite que funcione el Kit de herramientas de control:

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

Otro panel contiene dos vínculos de JavaScript para establecer la opacidad de la sombra paralela: el vínculo menos reduce la opacidad de la sombra, el vínculo más la aumenta.

<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 función changeOpacity() de JavaScript debe encontrar primero el control DropShadowExtender en la página. ASP.NET AJAX define el método $find() exactamente para esa tarea. A continuación, el método get_Opacity() recupera la opacidad actual y el método set_Opacity() la establece. Luego, el código JavaScript coloca el valor de opacidad actual en el elemento <label>:

<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>

La opacidad se cambia en el lado cliente (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente