Manipulowanie właściwościami DropShadow z poziomu kodu klienta (VB)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka DropShadow w zestawie narzędzi AJAX Control Toolkit rozszerza panel, dodając cień rzucany. Właściwości tego rozszerzenia można również zmienić przy użyciu kodu JavaScript klienta.

Przegląd

Kontrolka DropShadow w zestawie narzędzi AJAX Control Toolkit dodaje panelowi efekt cienia opadającego. Właściwości tego rozszerzenia można również zmienić przy użyciu kodu JavaScript klienta.

Kroki

Kod rozpoczyna się od panelu zawierającego kilka wierszy tekstu:

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

Skojarzona klasa CSS zapewnia panelowi ładny kolor tła:

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

Element DropShadowExtender jest dodawany w celu rozszerzenia panelu z efektem cienia kropli, nieprzezroczystość ustawiona na 50%:

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

Następnie kontrolka ASP.NET AJAX ScriptManager umożliwia działanie zestawu narzędzi Control Toolkit:

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

Inny panel zawiera dwa linki JavaScript do ustawiania przezroczystości cienia: link minus zmniejsza przezroczystość cienia, a link plus ją zwiększa.

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

Funkcja changeOpacity() JavaScript musi następnie najpierw znaleźć kontrolkę DropShadowExtender na stronie. ASP.NET AJAX definiuje metodę $find() dla dokładnie tego zadania. Metoda get_Opacity() pobiera bieżącą nieprzezroczystość, a metoda set_Opacity() ustawia ją. Następnie kod JavaScript umieszcza bieżącą wartość nieprzezroczystości w elemencie <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>

Nieprzezroczystość jest zmieniana po stronie klienta (kliknij, aby wyświetlić obraz o pełnym rozmiarze)