通过客户端代码操作 DropShadow 属性 (C#)

作者 :Christian Wenz

下载 PDF

AJAX 控件工具包中的 DropShadow 控件使用投影扩展面板。 还可以使用客户端 JavaScript 代码更改此扩展程序的属性。

概述

AJAX 控件工具包中的 DropShadow 控件使用投影扩展面板。 还可以使用客户端 JavaScript 代码更改此扩展程序的属性。

步骤

代码以包含一些文本行的面板开头:

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

关联的 CSS 类为面板提供漂亮的背景色:

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

DropShadowExtender添加 以扩展具有投影效果的面板,不透明度设置为 50%:

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

然后,ASP.NET AJAX ScriptManager 控件使 Control Toolkit 正常工作:

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

另一个面板包含两个用于设置投影不透明度的 JavaScript 链接:减号链接会降低阴影的不透明度,加号链接会增加阴影的不透明度。

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

然后,JavaScript 函数 changeOpacity() 必须先在页面上找到控件 DropShadowExtender 。 ASP.NET AJAX 为该任务定义 $find() 方法。 然后,方法 get_Opacity() 检索当前不透明度,该方法 set_Opacity() 对其进行设置。 然后,JavaScript 代码将当前不透明度值放入 元素中 <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>

客户端上的不透明度已更改

客户端上的不透明度将更改 (单击以查看全尺寸图像)