Manipulando Propriedades de DropShadow a partir do Código do Cliente (VB)

por Christian Wenz

Baixar PDF

O controle DropShadow no Kit de Ferramentas de Controle AJAX estende um painel com uma sombra suspensa. As propriedades desse extensor também podem ser alteradas usando o código JavaScript do cliente.

Visão geral

O controle DropShadow no Kit de Ferramentas de Controle AJAX estende um painel com uma sombra suspensa. As propriedades desse extensor também podem ser alteradas usando o código JavaScript do cliente.

Steps

O código começa com um painel que contém algumas linhas 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>

A classe CSS associada fornece ao painel uma cor de plano de fundo agradável:

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

O DropShadowExtender é adicionado para estender o painel com um efeito de sombra projetada, com opacidade definida em 50%:

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

Em seguida, o controle AJAX ScriptManager ASP.NET permite que o Kit de Ferramentas de Controle funcione:

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

Outro painel contém dois links JavaScript para definir a opacidade da sombra projetada: o link com o sinal de menos diminui a opacidade da sombra, o link com o sinal de mais aumenta-a.

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

A função JavaScript changeOpacity() deve primeiro encontrar o controle DropShadowExtender na página. ASP.NET AJAX define o $find() método exatamente para essa tarefa. Em seguida, o método get_Opacity() recupera a opacidade atual e o método set_Opacity() a define. Em seguida, o código JavaScript coloca o valor de opacidade atual no <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>

A opacidade é alterada no lado do cliente (clique para exibir a imagem em tamanho real)