Обработка свойств DropShadow из клиентского кода (C#)

Кристиан Венц (Christian Wenz)

Загрузить PDF-файл

Элемент управления DropShadow в наборе элементов управления AJAX расширяет панель с помощью тени. Свойства этого расширителя также можно изменить с помощью клиентского кода JavaScript.

Общие сведения

Элемент управления DropShadow в наборе элементов управления AJAX расширяет панель с помощью тени. Свойства этого расширителя также можно изменить с помощью клиентского кода 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 позволяет набору средств управления работать:

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

Затем функция changeOpacity() JavaScript должна сначала найти 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>

Непрозрачность изменяется на стороне клиента (щелкните, чтобы просмотреть полноразмерное изображение)

НазадВперед