本文介绍如何使用DropShadow扩展器控件为页面中的面板添加阴影效果，包括设置阴影不透明度、偏移量等属性，并展示了通过动态调整这些属性来改变阴影样式的方法。
DropShadow扩展器控件可以为页面中的某个面板投射出漂亮的阴影，起到突出显示以及美化页面的作用。
示例运行效果：
图(1)
图(2)
图(3)
DropShadowDemo.aspx代码示例：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropShadowDemo.aspx.cs" Inherits="Chapter08_DropShadowDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>DropShadow Demo</title>
<link href="styleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#master_content .dropShadowPanel span {color:white;text-decoration:underline;}
#master_content .dropShadowPanel span:hover {text-decoration:none;}
.dropShadowPanel
{
width:300px;
background-color:#5377A9;
color:white;
font-weight:bold;
}
</style>
</head>
<body>
<form id="DropShadowForm" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<div class="demoheading">让面板投射出阴影</div>
<asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel">
<div style="padding:10px">
First Name: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
Last Name: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<hr />
<asp:Panel ID="CollapseHeader" runat="server" style="cursor: pointer;">
<asp:Label ID="Label1" runat="server" Text="Label">Show Details...</asp:Label>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" style="overflow:hidden;height:0">
Not many details here. This is just a demo to show how the DropShadow will react
properly to changes in the size of the panel it is attached to.
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender ID="cpe1" runat="Server"
TargetControlID="Panel2"
Collapsed="true"
CollapsedText="Show Details..."
ExpandedText="Hide Details..."
TextLabelID="Label1"
ExpandControlID="CollapseHeader"
CollapseControlID="CollapseHeader"
SuppressPostBack="true" />
</div>
</asp:Panel>
<ajaxToolkit:DropShadowExtender ID="dse" runat="server"
BehaviorID="DropShadowBehavior1"
TargetControlID="Panel1"
Width="5"
Rounded="true"
Radius="6"
Opacity=".75"
TrackPosition="true" />
<!--
TargetControlID：该扩展器目标控件ID，即将要实现阴影效果的控件的ID
Opacity：阴影的不透明度，取值范围为0~1.0。该值越大，阴影则愈加不透明，即颜色愈深，反之亦然。
Width：阴影与投射出阴影的元素之间的偏移量。
Rounded：若该属性值设置为true，则将让目标控件比及阴影显示出圆角效果。
Radius：圆角的半径，单位为像素(px)。
TrackPosition：若目标控件将可能在页面中移动，或目标控件使用绝对定位指定位置，则该属性值应该设置为true，
让阴影跟踪目标控件的位置并自动随之移动。
-->
<div style="padding:15px;">
<label for="chkShadow">Show Drop Shadow: </label>
<input type="checkbox" checked="checked" id="chkShadow"
onclick="var b = $find('DropShadowBehavior1'); b.set_Width(chkShadow.checked ? 5 : 0);"/><br />
<label for="chkRounded">Rounded: </label>
<input type="checkbox" id="chkRounded" checked="checked"
onclick="var b = $find('DropShadowBehavior1'); b.set_Rounded(chkRounded.checked);"/>
<div>
Radius:
<input type="radio" id="radius2" name="radiusValues" value="2"
onclick="$find('DropShadowBehavior1').set_Radius(this.value);" />
<label for="radius2">2</label>
<input type="radio" id="radius4" name="radiusValues" value="4"
onclick="$find('DropShadowBehavior1').set_Radius(this.value);" />
<label for="radius4">4</label>
<input type="radio" id="radius6" name="radiusValues" value="6"
onclick="$find('DropShadowBehavior1').set_Radius(this.value);" checked="checked" />
<label for="radius6">6</label>
<input type="radio" id="radius10" name="radiusValues" value="10"
onclick="$find('DropShadowBehavior1').set_Radius(this.value);"/>
<label for="radius10">10</label>
</div>
<div>
Opacity:
<input type="radio" id="opacity25" name="opacityValues" value=".25"
onclick="$find('DropShadowBehavior1').set_Opacity(this.value);" />
<label for="opacity25">25%</label>
<input type="radio" id="opacity50" name="opacityValues" value=".5"
onclick="$find('DropShadowBehavior1').set_Opacity(this.value);" />
<label for="opacity50">50%</label>
<input type="radio" id="opacity75" name="opacityValues" value=".75"
onclick="$find('DropShadowBehavior1').set_Opacity(this.value);" checked="checked" />
<label for="opacity75">75%</label>
<input type="radio" id="opacity100" name="opacityValues" value="1.0"
onclick="$find('DropShadowBehavior1').set_Opacity(this.value);"/>
<label for="opacity100">100%</label>
</div>
</div>
</form>
</body>
</html>
示例运行效果：
图(1)
图(2)
图(3)
DropShadowDemo.aspx代码示例：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropShadowDemo.aspx.cs" Inherits="Chapter08_DropShadowDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>DropShadow Demo</title> <link href="styleSheet.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #master_content .dropShadowPanel span {color:white;text-decoration:underline;}
#master_content .dropShadowPanel span #master_content .dropShadowPanel span:hover {text-decoration:none;} .dropShadowPanel { width:300px; background-color:#5377A9; color:white; font-weight:bold; } </style></head><body> <form id="DropShadowForm" runat="server"> <asp:ScriptManager ID="sm" runat="server" /> <div class="demoheading">让面板投射出阴影</div> <asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel"> <div style="padding:10px"> First Name: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> Last Name: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /> <hr /> <asp:Panel ID="CollapseHeader" runat="server" style="cursor: pointer;"> <asp:Label ID="Label1" runat="server" Text="Label">Show Details...</asp:Label> </asp:Panel> <asp:Panel ID="Panel2" runat="server" style="overflow:hidden;height:0"> Not many details here. This is just a demo to show how the DropShadow will react properly to changes in the size of the panel it is attached to. </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="cpe1" runat="Server" TargetControlID="Panel2" Collapsed="true" CollapsedText="Show Details..." ExpandedText="Hide Details..." TextLabelID="Label1" ExpandControlID="CollapseHeader" CollapseControlID="CollapseHeader" SuppressPostBack="true" /> </div> </asp:Panel> <ajaxToolkit:DropShadowExtender ID="dse" runat="server" BehaviorID="DropShadowBehavior1" TargetControlID="Panel1" Width="5" Rounded="true" Radius="6" Opacity=".75" TrackPosition="true" /> <!-- TargetControlID：该扩展器目标控件ID，即将要实现阴影效果的控件的ID Opacity：阴影的不透明度，取值范围为0~1.0。该值越大，阴影则愈加不透明，即颜色愈深，反之亦然。 Width：阴影与投射出阴影的元素之间的偏移量。 Rounded：若该属性值设置为true，则将让目标控件比及阴影显示出圆角效果。 Radius：圆角的半径，单位为像素(px)。 TrackPosition：若目标控件将可能在页面中移动，或目标控件使用绝对定位指定位置，则该属性值应该设置为true， 让阴影跟踪目标控件的位置并自动随之移动。 --> <div style="padding:15px;"> <label for="chkShadow">Show Drop Shadow: </label> <input type="checkbox" checked="checked" id="chkShadow" onclick="var b = $find('DropShadowBehavior1'); b.set_Width(chkShadow.checked ? 5 : 0);"/><br /> <label for="chkRounded">Rounded: </label> <input type="checkbox" id="chkRounded" checked="checked" onclick="var b = $find('DropShadowBehavior1'); b.set_Rounded(chkRounded.checked);"/> <div> Radius: <input type="radio" id="radius2" name="radiusValues" value="2" onclick="$find('DropShadowBehavior1').set_Radius(this.value);" /> <label for="radius2">2</label> <input type="radio" id="radius4" name="radiusValues" value="4" onclick="$find('DropShadowBehavior1').set_Radius(this.value);" /> <label for="radius4">4</label> <input type="radio" id="radius6" name="radiusValues" value="6" onclick="$find('DropShadowBehavior1').set_Radius(this.value);" checked="checked" /> <label for="radius6">6</label> <input type="radio" id="radius10" name="radiusValues" value="10" onclick="$find('DropShadowBehavior1').set_Radius(this.value);"/> <label for="radius10">10</label> </div> <div> Opacity: <input type="radio" id="opacity25" name="opacityValues" value=".25" onclick="$find('DropShadowBehavior1').set_Opacity(this.value);" /> <label for="opacity25">25%</label> <input type="radio" id="opacity50" name="opacityValues" value=".5" onclick="$find('DropShadowBehavior1').set_Opacity(this.value);" /> <label for="opacity50">50%</label> <input type="radio" id="opacity75" name="opacityValues" value=".75" onclick="$find('DropShadowBehavior1').set_Opacity(this.value);" checked="checked" /> <label for="opacity75">75%</label> <input type="radio" id="opacity100" name="opacityValues" value="1.0" onclick="$find('DropShadowBehavior1').set_Opacity(this.value);"/> <label for="opacity100">100%</label> </div> </div> </form></body></html>
扫一扫
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
