Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
El control DropShadow en el AJAX Control Toolkit extiende un panel con una sombra proyectada. Las propiedades de este extensor también se pueden cambiar mediante código JavaScript de cliente.
Visión general
El control DropShadow en el AJAX Control Toolkit extiende un panel con una sombra proyectada. Las propiedades de este 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 buen color de fondo:
<style type="text/css">
.panel {background-color: navy;}
</style>
DropShadowExtender se agrega para extender el panel con un efecto de sombra en caída, opacidad establecida al 50%.
<ajaxToolkit:DropShadowExtender ID="dse1" runat="server"
TargetControlID="panelShadow"
Opacity="0.5" Rounded="true" />
A continuación, el control ASP.NET AJAX ScriptManager permite que el kit de herramientas de control funcione:
<asp:ScriptManager ID="asm" runat="server" />
Otro panel contiene dos enlaces de JavaScript para establecer la opacidad de la sombra paralela: el enlace de menos reduce la opacidad de la sombra, y el enlace de 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 de JavaScript changeOpacity() debe primero buscar el control DropShadowExtender en la página. ASP.NET AJAX define el $find() método para exactamente esa tarea. A continuación, el get_Opacity() método recupera la opacidad actual, el set_Opacity() método lo establece. A continuación, el código JavaScript coloca el valor de opacidad actual en el <label> elemento :
<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 de tamaño completo).
