クライアント コードから DropShadow プロパティを操作する (C#)
AJAX Control Toolkit の DropShadow コントロールは、ドロップ シャドウでパネルを拡張します。 このエクステンダーのプロパティは、クライアント JavaScript コードを使用して変更することもできます。
概要
AJAX Control Toolkit の 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" />
別のパネルには、ドロップシャドウの不透明度を設定するための2つの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>
クライアント側で不透明度が変更されます (フルサイズの画像を表示するには、ここをクリックします)
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示