Memanipulasi Properti DropShadow dari Kode Klien (VB)

oleh Christian Wenz

Unduh PDF

Kontrol DropShadow di Toolkit Kontrol AJAX memperluas panel dengan bayangan jatuh. Properti extender ini juga dapat diubah menggunakan kode JavaScript klien.

Gambaran Umum

Kontrol DropShadow di Toolkit Kontrol AJAX memperluas panel dengan bayangan jatuh. Properti extender ini juga dapat diubah menggunakan kode JavaScript klien.

Langkah-langkah

Kode dimulai dengan panel yang berisi beberapa baris teks:

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

Kelas CSS terkait memberi panel warna latar belakang yang bagus:

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

DropShadowExtender ditambahkan untuk memperluas panel dengan efek bayangan jatuh, opasitas diatur ke 50%:

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

Kemudian, kontrol AJAX ScriptManager ASP.NET memungkinkan Control Toolkit berfungsi:

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

Panel lain berisi dua tautan JavaScript untuk mengatur opasitas bayangan jatuh: tautan minus mengurangi opasitas bayangan, tautan plus meningkatkannya.

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

Fungsi JavaScript changeOpacity() kemudian harus terlebih dahulu menemukan DropShadowExtender kontrol di halaman. ASP.NET AJAX mendefinisikan $find() metode untuk tugas tersebut. Kemudian, get_Opacity() metode mengambil opasitas saat ini, set_Opacity() metode mengaturnya. Kode JavaScript kemudian menempatkan nilai opasitas saat ini dalam <label> elemen :

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

Opasitas diubah di sisi klien (Klik untuk melihat gambar ukuran penuh)

Sebelumnya