İstemci Kodundan DropShadow Özelliklerini Düzenleme (C#)

Christian Wenz tarafından

PDF’yi İndir

AJAX Denetim Araç Seti'ndeki DropShadow denetimi, gölgeli bir paneli genişletir. Bu genişleticinin özellikleri istemci JavaScript kodu kullanılarak da değiştirilebilir.

Genel Bakış

AJAX Denetim Araç Seti'ndeki DropShadow denetimi, gölgeli bir paneli genişletir. Bu genişleticinin özellikleri istemci JavaScript kodu kullanılarak da değiştirilebilir.

Adımlar

Kod, bazı metin satırları içeren bir panelle başlar:

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

İlişkili CSS sınıfı panele güzel bir arka plan rengi verir:

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

, DropShadowExtender paneli gölge efektiyle genişletmek için eklenir ve opaklık %50'ye ayarlanır:

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

Ardından ASP.NET AJAX ScriptManager denetimi, Denetim Araç Seti'nin çalışmasını sağlar:

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

Başka bir panel, gölgenin opaklığını ayarlamak için iki JavaScript bağlantısı içerir: eksi bağlantısı gölgenin opaklığını azaltır, artı bağlantısı onu artırır.

<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 işlevi changeOpacity() daha sonra önce denetimi sayfada bulmalıdır DropShadowExtender . ASP.NET AJAX tam olarak bu görevin yöntemini tanımlar $find() . Ardından yöntemi get_Opacity() geçerli opaklığı alır, set_Opacity() yöntemi bunu ayarlar. JavaScript kodu daha sonra geçerli opaklık değerini <label> öğesine yerleştirir:

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

İstemci tarafında opaklık değiştirilir (Tam boyutlu görüntüyü görüntülemek için tıklayın)

ÖncekiSonraki